0

github で基本的な例を見ましたが、自分のコードで動作させることができません。デュランダルを使用していることを付け加えておきます。

バインディングを機能させるにはどうすればよいですか? 私は何か間違ったことをしていますか？

入力.js

define(['knockout'], function (ko) {

    var ctor = function (value) {
        //Properties
        this.value = ko.observable(value);
        this.placeholder = 'Input';

        //Methods
        this.getBindings = function () {
            var bindings = {};
            bindings.Input = {
                value: this.value,
                attr: {
                    placeholder: this.placholder,
                },
            };
            bindings.Test = {
                text: this.value,
            };

           return bindings;
        };
    };


    return ctor;
});

Form.js

define(['knockout', 'Input'], function (ko, Input) {

    var ctor = function (inputs) {
        //Properties
        this.inputs = ko.observableArray(inputs);

        //Methods
        this.getBindings = function () {
            var bindings = {};
            bindings.Inputs = {
                foreach: this.inputs,
                Item: function (context, classes) {
                    return context.$data.getBindings();
                },
            };

            return bindings;
        };
    };


    return ctor;
});

Module.js

define(['knockout', 'Input', 'Form'], function (ko, Input, Form) {
    var ctor = function () { };

    ctor.prototype.activate = function () {
        var data = [
            new Input(123),
            new Input("Chris"),
            new Input(true)
        ];
        this.form = new Form(data);
    };

    ctor.prototype.binding = function () {
        var bindings = this.form.getBindings();
        ko.bindingProvider.instance.registerBindings(bindings);
    };


    return ctor;
});

Module.htmlこれは機能しません。

<div id="Module">
    <div data-class="Inputs">
        <div>
            <input data-class="Inputs.Item.Input" />
            <span data-class="Inputs.Item.Test"></span>
        </div>
    </div>
</div>

Module.htmlこれは機能しますが、foreach に classBindingProvider を使用していません。

<div id="Module">
    <div data-class="Inputs">
        <div>
            <input data-bind="value: value, attr: { placeholder: placeholder }" />
            <span data-bind="text: value"></span>
        </div>
    </div>
</div>

エラー メッセージはありませんが、バインディングは発生しません。3 つの空の入力フィールドが表示されます。

4

1 に答える 1

0

私はそれを考え出した。動作するコードを投稿します。

私は2つのことを変えました。最初に、<div data-class="Inputs.Item">その場所に関連するプロパティを追加してから参照しました (InputおよびTest)。getBindings2 番目に、バインディングを関数のすぐ内側に登録します。これにより、バインディングがinitBindings.

入力.js

define(['knockout'], function (ko) {

    var ctor = function (value) {
        //Properties
        this.value = ko.observable(value);
        this.placeholder = 'Input';

        //Methods
        this.initBindings = function () { //FIX: getBindings => initBindings
            var bindings = {};
            bindings.Input = {
                value: this.value,
                attr: {
                    placeholder: this.placholder,
                },
            };
            bindings.Test = {
                text: this.value,
            };

            ko.bindingProvider.instance.registerBindings(bindings); //FIX: register instead of return
        };
    };

    return ctor;
});

Form.js

define(['knockout', 'Input'], function (ko, Input) {

    var ctor = function (inputs) {
        //Properties
        this.inputs = ko.observableArray(inputs);

        //Methods
        this.initBindings = function () { //FIX: getBindings => initBindings
            var bindings = {};
            bindings.Inputs = {
                foreach: this.inputs,
                Item: function (context, classes) {
                    context.$data.initBindings(); //FIX: Call the init.
                },
            };

            ko.bindingProvider.instance.registerBindings(bindings); //FIX: register instead of return
        };
    };

    return ctor;
});

Module.js

define(['knockout', 'Input', 'Form'], function (ko, Input, Form) {
    var ctor = function () { };

    ctor.prototype.activate = function () {
        var data = [
            new Input(123),
            new Input("Chris"),
            new Input(true)
        ];
        this.form = new Form(data);
    };

    ctor.prototype.binding = function () {
        this.form.initBindings(); //FIX: Call the init.
    };

    return ctor;
});

Module.html

<div id="Module">
    <div data-class="Inputs">
        <div data-class="Inputs.Item"> //FIX: no binding => Inputs.Item
            <input data-class="Input" /> //FIX: Inputs.Item.Input => Input
            <span data-class="Test"> //Fix: Inputs.Item.Test => Test
            </span> 
        </div>
    </div>
</div>
于 2016-08-18T22:54:03.910 に答える