Нокаут JS-привязка

63
4

Я новичок в Knockout JS, и я занимаюсь этим на своем сайте

Практика нокаута

Таким образом, проблема, с которой я столкнулся, - это то, что я не могу заставить привязку кликов работать.

Вот мой пример кода

Просмотр - HTML

<ul data-bind="foreach:friends">
<li>
<strong data-bind="text: friendName"></strong>
<input type="checkbox" data-bind="checked: knowJS" />
<input data-bind="value: favLib,visible: knowJS" />
</li>
</ul>

<button data-bind="click: addFriend">Add Friend</button>

ViewModel - JavaScript

//Create a sample JS Class
function friend(name) {
this.friendName = name;
this.knowJS = ko.observable(false);
this.favLib = ko.observable('');
};

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
var AppViewModel= function(){
this.friends = ko.observableArray([new friend("Chiranjib"), new friend("Nandy")]);
};

AppViewModel.addFriend= function(){
this.friends.push(new friend("A new friend"));
};

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Это событие clickDriend не запускается. Что я делаю не так?

спросил(а) 2021-01-27T16:57:01+03:00 4 месяца, 3 недели назад
1
Решение
77

Проблема в том, что ваша функция addFriend находится в неправильном месте, поэтому KO не может ее найти. Вы поместили его в функцию AppViewModel, но там, где вы хотите, это объекты, созданные этой функцией.

На самом деле ваш браузер говорит вам о проблеме. Если вы откроете свою веб-консоль, вы увидите:


Uncaught ReferenceError: Unable to process binding "click: function (){return addFriend }"
Message: addFriend is not defined

Два способа поставить его на объект: поставьте его на объект, который будет прототипом этих объектов (доступный через AppViewModel.prototype), или создайте его в функции конструктора, как вы с friends. Я не вижу причин, по которым он не может быть разделен, поэтому я бы пошел на прототип:

AppViewModel.prototype.addFriend= function(){
// Note ----^^^^^^^^^^^
this.friends.push(new friend("A new friend"));
};

Живой пример с этим одним изменением:

//Create a sample JS Class
function friend(name) {
this.friendName = name;
this.knowJS = ko.observable(false);
this.favLib = ko.observable('');
};

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
var AppViewModel= function(){
this.friends = ko.observableArray([new friend("Chiranjib"), new friend("Nandy")]);
};

AppViewModel.prototype.addFriend= function(){
this.friends.push(new friend("A new friend"));
};

// Activates knockout.js
ko.applyBindings(new AppViewModel());

<ul data-bind="foreach:friends">
<li>
<strong data-bind="text: friendName"></strong>
<input type="checkbox" data-bind="checked: knowJS" />
<input data-bind="value: favLib,visible: knowJS" />
</li>
</ul>

<button data-bind="click: addFriend">Add Friend</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Замечание: в JavaScript подавляющее соглашение состоит в том, что функции-конструкторы изначально капитализируются, как и ваш AppViewModel. Таким образом, функция friend должна быть Friend.

ответил(а) 2021-01-27T16:57:01+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема