0

監視可能な配列から入力された 2 つのドロップダウンがあります。2 番目の結果は、最初の結果によってフィルター処理されます。これはうまくいきます。2 番目の id の値はバインディングの前に設定されますが、バインディングはそれを消去するようで、再度変更することはありません。

また、viewModel の json が表示されない理由もわかりません。

html

 <p>
     <label>Serial Number</label>
     <span data-bind="text: PartNumber"></span>
     <span data-bind="text: Revision"></span>
     <span data-bind="text: SequenceNumber"></span>
</p>      

<label>Description</label>        
<input data-bind="value: Description" />

<label>Usage</label>
<select data-bind="options: UsageTypes, optionsText: 'UsedType', optionsValue: 'UsedTypeID', value: UsedTypeID"></select>
<select data-bind="options: UsageFiltered, optionsText: 'UsedOn', optionsValue: 'UsedOnID', optionsCaption: 'select...', value: UsedOnID, visible:UsedTypeID"></select>

<p data-bind="text: ko.toJSON(viewModel)"></p>

JavaScript

var data = {"PartNumber":"SAMPLE123456","Revision":"D","SequenceNumber":"1","SerialNumber":"SAMPLE123456D001","Description":"This is a test","SupplierID":"4","UsedTypeID":"U","UsedOnID":0} ;

var viewModel = ko.mapping.fromJS(data);

viewModel.UsageTypes = ko.observableArray( [{"UsedTypeID":"P","UsedType":"Product"},{"UsedTypeID":"S","UsedType":"Series"},{"UsedTypeID":"U","UsedType":"Unknown"}]);
viewModel.UsagesList = ko.observableArray(
[{"UsedTypeID":"P","UsedType":"Product","UsedonID":14,"UsedOn":"banana"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":16,"UsedOn":"kjhkjhkj"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":7,"UsedOn":"prod1234"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":15,"UsedOn":"things"},
 {"UsedTypeID":"P","UsedType":"Product","UsedonID":20,"UsedOn":"thinkgs2"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":17,"UsedOn":";lkgd;ldf"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":18,"UsedOn":"df;lkjdflk"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":13,"UsedOn":"fdsdfsdf"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":12,"UsedOn":"mn,m,m,"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":19,"UsedOn":"rubberchicken"},
 {"UsedTypeID":"S","UsedType":"Series","UsedonID":11,"UsedOn":"sdfsdfsdf"},
 {"UsedTypeID":"U","UsedType":"Unknown","UsedonID":0,"UsedOn":"Unknown"}]);

viewModel.UsageFiltered = ko.computed(function(){
    var filter = this.UsedTypeID();
    if (!filter){
        return this.UsagesList();
    } else {
        return ko.utils.arrayFilter(this.UsagesList(), function(item) {
            return filter === item.UsedTypeID    
        }); 
    }
}, viewModel);

ko.applyBindings(viewModel);

フィドルを見る

4

1 に答える 1

0

JSON を返す計算メソッドを追加し、それを段落タグの HTML にバインドしたところ、機能しました。

<p data-bind="html: jsonText"></p>


viewModel.jsonText = ko.computed(function(){
    return ko.toJSON(viewModel);
}, viewModel);

ここでフィドルを更新しました：

http://jsfiddle.net/5rg6e/5/

于 2013-01-23T00:39:10.787 に答える