0

いくつかの問題でノックアウトを適用しようとしているシナリオがあります。基本的に私はこの種のUIを持っています

Add (create a new Select Box duo with delete button)

Select Box  (options = Json from ajax request)
Select Box  (options = Json from ajax request with param from 1st select)
Delete

Select Box 
Select Box 
Delete

等

各行は配列内の別のウィジェットと見なされるため、簡単にするためにノックアウトします

var ViewModel = function (widgets) {

    var self = this;

    this.widgets= ko.observableArray(widgets);
    this.subWidgets= ko.observableArray();

    this.mySelections = ko.observableArray();

   this.selectedWidget.subscribe(function (name) {

        if (name != null) {
            $.ajax({
                url: '@Url.Action("AddSubWidgetsByName")',
                data: { name: name },
                type: 'GET',
                async: false,
                contentType: 'application/json',
                success: function (result) {

                    self.subWidgets(result);

                }
            });
        }
    } .bind(this));

    self.addWidget = function (widget) {
        self.mySelections.push({

            ??? profit
        });
    };

}
var viewiewModel = new ViewModel();
ko.applyBindings(viewiewModel);

$.ajax({
    url: '@Url.Action("AddFund")',
    type: 'GET',
    async: false,
    contentType: 'application/json',
    success: function (result) {

        viewModel.widgets(result);


    }
});
 <select id="widgets" 
                data-bind='
                    options: widgets, 
                    optionsValue : "Name", 
                    optionsText: "Name", 
                    optionsCaption: "[Please select a widgets]"'
                    value: selectedWidget,

>>

ウィジェットごとに選択を動的に作成し、サブウィジェットの選択をmySelections配列のアイテムに関連付けることはできますか？すべてのドロップダウンがこのようにバインドされているため、selectedWidgetの値のバインドをこのように使用することはできません。私はそれらを独立させる必要があります-それについてどうやって行くかについてのアイデアはありますか？

乾杯！

4

1 に答える 1

0

これを行う1つの方法は、各ウィジェットを独自のビューモデルにすることです（これは、jsFiddleからのものであるため、ajaxは、POSTを必要とするエコーAPIで動作するように実行されます）。

var Widget = function(){
var self = this;
self.selectedWidget = ko.observable('');
self.subWidgets = ko.observableArray([]);
self.selectedSubWidget = ko.observable('');

this.selectedWidget.subscribe(function (name) {
    if (name != null) {
        $.ajax({
            url:"/echo/json/",
            data: {
                json: $.toJSON(
                    [Math.floor(Math.random()*11),
                     Math.floor(Math.random()*11),
                     Math.floor(Math.random()*11)]
                ),
                delay: 1
            },
            type:"POST",
            success:function(response)
            {
                self.subWidgets(response);
            }
        });
    }
});

};

その後、単純なビューモデルを使用して、サブ選択と追加を簡単に追跡できます。これが完全なフィドルです。

于 2012-06-25T18:00:16.513 に答える