0

これは私の HTML です。

私はノックアウト js の世界の初心者ですが、強力なフレームワークのように見えるので、次のプロジェクトで使用することに非常に興味を持っています。しかし、自分のコードでそれを機能させることができなかったため、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 で更新イベントがトリガーされないのかということです。私は何を間違えましたか？

4

1 に答える 1

1

model.change関数がkoオブザーバブルを操作するための正しい構文を使用していないため、カスタムハンドラーが起動していないと思います。()それらの値を取得または設定するときに使用する必要があります。

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

ただし、カスタムバインディングハンドラーを完全に廃止できる場合があります。以下のコードで同じ機能を実現できます (カスタム ハンドラーなし)。ここで働くフィドル

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);
于 2013-09-04T01:35:02.487 に答える