Make knockout.js scripts work

Question

0.00/5 (No votes)

See more:

I would like to know how I can make two ko.js scripts work at the moment one is being cancelled by the first one separate they work great can someone help me

HTML

<script>
$('#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, viewModel) {
		$(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());






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

$('#addText').click(function (e) {
	/** Make div draggable **/
	$('<div />', {
		class: 'ui-widget-content',
		appendTo: '.container4',
		draggable: {
			containment: 'parent',
			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, viewModel) {
		$(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());</script>

What I have tried:

I have tried everything that ive been told I was told to combine them bu I don't know how to do that

Posted 7-Aug-16 10:34am

Member 12674274

Updated 8-Aug-16 10:36am

Patrice T

v6

Add a Solution

Comments

Patrice T 7-Aug-16 16:39pm

Show the code

Patrice T 7-Aug-16 16:51pm

Use Improve question to update your question.

Member 12674274 7-Aug-16 17:21pm

did you find a solution?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Adam R Harris · Answer 1 · 2016-08-08T10:36:00

Your problem is you are not targeting the elements you want to apply your bindings to with your ko.applyBindings call.

side note, dont use the same vm variable for the view models. that is going to cause a nightmare later when, just use vm1 & vm2 but i would recommend something more descriptive.

Im assuming you have 2 divs you want to apply your templates to, lets call them temp1 & temp2. Your code to set the templates with the different view models should be

JavaScript

/* code to prepare first view model */
var vm1 = ...
/* code to prepare second view model */
var vm2 = ...

/* bind the view models */
ko.applyBindings(vm1, document.getElementById("temp1"));
ko.applyBindings(vm1, document.getElementById("temp2"));

notice how i pass the DOM element as the second parameter to the applyBindings call? thats how you target only a specific template when applying bindings.

Sadly this is all the documentation has to say about it: Knockout : Activating Knockout[^]

Also: take a look at Knockout : The "click" binding[^] for your click functions.