Question

这是我的HTML：嗨，伙计们，

我是关于knockoutjs世界的新人，但我感觉非常有兴趣在我的下一个项目中使用它，因为它似乎是一个强大的框架。但是我有一些障碍来理解knockoutjs自定义绑定是如何工作的，因为我无法使它适用于我自己的代码。所以实际上我自己做了一些小实验，如下面的代码：

这是我的html文件中的代码：

<form id="form1" runat="server">
<div data-bind="schoolCalendar: student">        
</div>
    <br />
    <input type="button" data-bind="click: change" value="Click"/>
</form>

这是我的javascript：

    var student = function (firstname, lastname, age) {
        self = this;
        self.firstname = ko.observable(firstname);
        self.lastname = ko.observable(lastname);
        self.age = ko.observable(age);
    }

    var model = function (student) {
        self = this;
        self.student = ko.observable(student);
        self.change = function () {
            self.student.firstname = "Virna";
            self.student.lastname = "Patel";
            self.student.age = 27;
        };
    }

    ko.bindingHandlers.schoolCalendar = {
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
            var root = $(element);
            var value = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);
            var allBindings = allBindingsAccessor();
            var html = "<span id=\"firstname\">Firstname is " + valueUnwrapped.firstname() + "</span><br/>";
            html += "<span id=\"lastname\">Lastname is " + valueUnwrapped.lastname() + "</span><br/>";
            html += "<span id=\"age\">Age is " + valueUnwrapped.age() + "</span><br/>";
            root.append(html);

            ko.applyBindingsToNode($("firstname").get(0), valueUnwrapped.firstname());
            ko.applyBindingsToNode($("lastname").get(0), valueUnwrapped.lastname());
            ko.applyBindingsToNode($("age").get(0), valueUnwrapped.age());

            return ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
        }
    };

    $(document).ready(function () {
        var m = new model(new student("John", "Hadikusumo", 43));
        ko.applyBindings(m);
    });

我的问题是：为什么当我点击按钮时，它不会触发knockoutjs bindingHandler上的更新事件。我做错了什么？

Answer 1

我认为你的自定义处理程序没有触发，因为你的model.change函数没有使用正确的语法来处理ko observables。获取或设置其值时，您需要使用()。

self.change = function () {
            self.student().firstname("Virna");
            self.student().lastname("Patel");
            self.student().age(27);
        };

您可以完全取消自定义绑定处理程序。您可以使用下面的代码完成相同的功能（没有自定义处理程序）。工作小提琴here

HTML

<div data-bind="with: student">
    Firstname is <span id="firstname" data-bind="text: firstname"></span><br />
    Lastname is <span id="lastname" data-bind="text: lastname"></span><br />
    Age is <span id="age" data-bind="text: age"></span>
</div>
    <br />
    <input type="button" data-bind="click: change" value="Click"/>

JS

var student = function (firstname, lastname, age) {
    self = this;
    self.firstname = ko.observable(firstname);
    self.lastname = ko.observable(lastname);
    self.age = ko.observable(age);
};

var model = function (std) {
    self = this;
    self.student = ko.observable(std);
    self.change = function () {
        self.student().firstname("Virna");
        self.student().lastname("Patel");
        self.student().age(27);
    };
};

var m = new model(new student("John", "Hadikusumo", 43));
ko.applyBindings(m);

自定义绑定更新事件未触发

1 个答案: