0

私は最初のノックアウト プロジェクトに参加しており、少しのガイダンスを使用できます。これまでのところ、サービスからビュー モデルにメイン クラスを設定できますが、選択リスト ボックスをバインドしようとしていますが、データは利用可能ですが、期待どおりにコントロールがバインドされません。選択リストのデータを取得してフォームに入力できるようになりましたが、適切なインデックスが選択されていません。

ご清聴ありがとうございました！

  // Initialized the namespace
    var Namespace = {};

    // View model declaration
    Namespace.initMemberVM = function (model) {
        var memberViewModel = {
            Id: ko.observable(model.Id),
            Married: ko.observable(model.Married),
            Name: ko.observable(model.Name),
            SalutationId : ko.observable(model.SalutationId),
            Salutation: ko.observable(Namespace.salutations[model.SalutationId]),
            Salutations: Namespace.salutations 
        };
        return memberViewModel;
    };

    Namespace.initSalutations = function (model) {
        console.log('called initSalutations');
        Namespace.salutations = ko.mapping.fromJS(model); 
    };


 // Bind the member
    Namespace.bindData = function (model) {
        // Create the view model
        var viewModel = Namespace.initMemberVM(model);

        ko.applyBindings(viewModel);
    };
    $(document).ready(function () {
        Namespace.getSalutations();
        Namespace.getMember(1);
    });

ajax 呼び出しから返されたデータは次のとおりです。

[{"Id":1,"Name":"Mr","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":2,"Name":"Mrs.","IsMarried":true,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":3,"Name":"Ms","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":4,"Name":"Miss","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"}]

ここにHTMLがあります

 <table>
        <tbody>
        <tr><td>User Id</td><td colspan="4"><label data-bind="text: Name"></label></td></tr>
        <tr>
        <td>Salutation</td><td><select   data-bind="options: Salutations, value: Id, optionsText: 'Name'"></select></td>
        </tr>
        <tr>
        <td></td><td>First</td><td>Middle</td><td>Last</td>
        </tr>
        <tr>
            <td>Name</td><td><input type="text" data-bind="value: FName"></td><td><input type="text"  data-bind="value: MName"></td><td><input type="text"  data-bind="value: LName"></td>
        </tr>


    </tbody>

更新: もう少し掘り下げた後、select が正しいインデックスを保持していない理由は b/c であることがわかりました.

それを管理する方法についてのガイダンスをいただければ幸いです。

4

1 に答える 1

0

同様の問題を抱えている人のために、役に立つと思われるコードの残りの部分を次に示します。繰り返しますが、コメントで見逃した場合は、サービスへの最初の呼び出しを更新して、コントローラーのデータも戻します。私のメンバーは。後でこのアプローチを調整して、後で使用するために参照データが個別に保存されるようにしますが、今のところ...

 $.each(my.dataService.member.Salutations, function (i, p) {
                    salutations.push(new my.Dropdown(selectedItem)
                            .id(p.Id)
                            .name(p.Name)
                    );
                });


    // for creating Position Models
    my.Dropdown = function (selectedItem) {
        var self = this;
        self.id = ko.observable();
        self.name = ko.observable();
        // non-persitable properties
        self.isSelected = ko.computed(function () {
            return selectedItem() === self;
        });
    };
于 2012-12-31T14:14:39.807 に答える