0

こんにちは、次のコードがあります:

 <div class="dropdownSelector" data-bind="visible: modelSelectorD.isActive()">
    <i></i>
    <input type="text" data-bind="value: modelSelectorD.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" />
    <ul data-bind="foreach: modelSelectorD.visibleData">
        <li data-bind="click: modelSelectorD.doSwitch"><a data-bind="html: modelSelectorD.getName($data,$element)"></a></li>        
    </ul>
    <span data-bind="visible:modelSelectorD.showMoreLink, text:modelSelectorD.showMoreText"></span><br/>    
    <a href="#" class="close" data-bind="click: modelSelectorD.close">Close</a>
</div>


<div class="dropdownSelector" data-bind="visible: modelSelectorC.isActive()">
    <i></i>
    <input type="text" data-bind="value: modelSelectorC.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" />
    <ul data-bind="foreach: modelSelectorC.visibleData">
        <li data-bind="click: modelSelectorC.doSwitch"><a data-bind="html: modelSelectorC.getName($data,$element)"></a></li>        
    </ul>
    <span data-bind="visible:modelSelectorC.showMoreLink, text:modelSelectorC.showMoreText"></span><br/>    
    <a href="#" class="close" data-bind="click: modelSelectorC.close">Close</a>
</div>

<script type="text/javascript">
    var obj = { id: 0, name: "not selected" };
    function selector(maxcount, serviceGet, serviceChange) {
        var self = this;
        self.isActive = ko.observable(false);
        self.maxcount = ko.observable(maxcount);
        self.serviceUrlGet = serviceGet;
        self.serviceUrlChange = serviceChange;
        self.searchText = ko.observable("");
        self.selectedItem = ko.observable(obj);
        self.allObjects = ko.observableArray([]);
        self.visibleData = ko.observableArray([]);
        self.showMoreLink = ko.computed(function () {
            return self.allObjects().length > self.maxcount();
        }
        );

        self.showMoreText = ko.computed(function () {
            return "... ( " + self.allObjects().length + " )";
        }
        );

        self.getName = function (data, element) {
            if (data) {
                var html = "<i>" + data.id + "</i> " + data.name;
                return html;
            }
            return "";
        };
        self.doSwitch = function (data) {
            self.selectedItem(data);
            self.close();
        };

        self.close = function () {
            self.isActive(false);
        };

        self.show = function () {
            self.isActive(true);
        };

        self.searchText.subscribe(function (newValue) {
            self.getData(newValue);
        });

        self.getData = function (searchText) {
            var data = { "name": searchText, "maxcount": self.maxcount() };
            $.ajax({
                type: "POST",
                url:  self.serviceUrlGet,
                cache: false,
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify(data),
                success: function (data) {
                    self.allObjects(data.d);
                    if (self.allObjects().length > self.maxcount()) {
                        self.visibleData(self.allObjects().slice(0, self.maxcount()));
                    }
                    else {
                        self.visibleData(self.allObjects());
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //console.log(textStatus);
                }
            });
        }
    }
    var modelSelectorD = new selector(5, "/services2", "");
    var modelSelectorC = new selector(5, "/services1", "");
    ko.applyBindings(modelSelectorD);
    ko.applyBindings(modelSelectorC);
    $(function () {
        modelSelectorD.getData("");
    });
</script>

foreachを除いてうまく機能しています.foreachは私のLI要素を表示しません。なぜそれが起こらないのですか？

4

2 に答える 2

1

さまざまなビュー モデルをページのさまざまな部分にバインドできます。

ko.applyBindings(viewModel1, $('#section1')[0]);
ko.applyBindings(viewModel2, $('#section2')[0]);
于 2013-04-08T08:26:27.830 に答える
1

この件に関する詳細については、この質問を確認してください: Knockoutjs Multiple Viewmodels in a single view。

必要なことは、2 つのモデルを 1 つのビュー モデルに結合し、それを参照することです。

例えば

var viewModel = {
    modelSelectorD: new selector(5, "/services2", ""),
    modelSelectorC: new slector(5, "/services1", "")
}

ko.applyBindings(viewModel);

または、バインディングを適用する特定の要素をターゲットにすることもできます。

必要に応じて、2 番目のパラメーターを渡して、データ バインド属性を検索するドキュメントの部分を定義できます。たとえば、ko.applyBindings(myViewModel, document.getElementById('someElementId')) です。これにより、アクティブ化が ID someElementId とその子孫を持つ要素に制限されます。これは、複数のビュー モデルを持ち、それぞれをページの異なる領域に関連付ける場合に役立ちます。

-- http://knockoutjs.com/documentation/observables.html

于 2013-04-08T08:10:15.527 に答える