Knockout.js duplicate script

Question

when I put both ko.js together one of them gets overshadowed by the first I mean the second one stops working and just the first one works how can I merge them together and have them working properly without any problems. separately they work great just not together why is that?

var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content1',
        appendTo: '.container4',
        draggable: {
            containment: 'parent1',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});


$(document).on("dblclick", '.text1', function()
{
    $(this).hide();    $(this).closest('.item1').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item1').find('.text1').text($(editingText).val()).show();
    }
});


    var count = 1;
var selectedDraggable;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel2) {
        $(element).draggable();
        $(element).addClass('item1' + count);
        count++;
        $(element).on('click', function () {
            selectedDraggable = $(this);
        })
    }
};


var vm=function(){
    var self=this;
    self.items1=ko.observableArray();
    self.textContent1 = ko.observable('');
    self.init=function(){
        self.items1([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items1.remove(item);
    }
    self.addNew1 = function() {
      self.items1.push( self.textContent1() );
      self.textContent1('');
    }
    self.init();
}

ko.applyBindings(new vm());
















var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});


$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item').find('.text').text($(editingText).val()).show();
    }
});


    var count = 1;
var selectedDraggable;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel1) {
        $(element).draggable();
        $(element).addClass('item' + count);
        count++;
        $(element).on('click', function () {
            selectedDraggable = $(this);
        })
    }
};


var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.textContent = ko.observable('');
    self.init=function(){
        self.items([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.addNew = function() {
      self.items.push( self.textContent() );
      self.textContent('');
    }
    self.init();
}

ko.applyBindings(new vm());

You've asked four questions recently, all extremely similar, with [this other one](http://stackoverflow.com/q/38780024/419956) possibly even a direct duplicate. The ones that do have code in them, have *a lot* of it. I suggest reading through the help center a bit, improving your existing questions instead of keep asking new ones (or: explain how they are related/different). — Jeroen, Aug 08 '16 at 05:40

score 0 · Answer 1 · edited May 23 '17 at 11:51

As @Jeroen stated, you should reduce your code to a minimal, complete, and verifiable example.

However, knockout applies it's bindings to the entire DOM. It doesn't make sense to call applyBindings on the entire DOM more than once. If you have different view models for different parts of your page, pass the DOM element you want each view model to bind to during applyBindings:

 ko.applyBindings(new vm(), document.getElementById('someElementId'))

Knockout.js duplicate script

1 Answers1