Knockout.js knockoutjs-如何填充空的可观察数组以响应用户操作（锚链接单击）

我试图向空的可观察数组中添加元素，以响应用户选择（用户单击链接将该元素添加到可观察数组）

以下是我的ko脚本代码：

function mfProduct(data) {
    var self = this;
    self.MfProductId = data.MfProductId;
    self.MfProductName = data.MfProductName;
};

function mfProductViewModel() {
    // Data
    var self = this;
    self.ProdId = ko.observable();
    self.ProdName = ko.observable();
    self.selectedProducts = ko.observableArray([]);

    // Operations
    self.addProduct = function () {
        if (self.ProdId() != '' && self.ProdId() != undefined) {
            self.selectedProducts.push(new mfProduct({ MfProductId: self.ProdId(), MfProductName: self.ProdName() }));
            self.ProdId("");
            self.ProdName("");
        }
    };

    self.removeProduct = function (mfProduct) {
        self.selectedProducts.remove(mfProduct);
    };
};

以下是我的视图标记：

<div class="row">
<div id="selectedProducts" class="col-sm-12" data-bind="foreach: selectedProducts">
    <div class="row" style="border: 1px solid red;">
        <div class="col-sm-10"><strong data-bind="text: MfProductName"></strong></div>
        <div class="col-sm-2"><a href="#" data-bind="click: removeProd"><i class="glyphicon glyphicon-remove-circle"></i></a></div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-3">
        Select product
    </div>
    <div class="col-sm-offset-3">
        <input type="hidden" id="selectedProdId" data-bind="value: ProdId" value="">
        <input type="hidden" id="selectedProdName" data-bind="value: ProdName" value="">
        <div id="searchResults" class="ddlContents">
            <ul>
                <li><a id="00001" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Milky Way</a></li>
                <li><a id="00002" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Bocadin</a></li>
                <li><a id="00003" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Carlos V</a></li>
                <li><a id="00004" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Snickers</a></li>
                <li><a id="00005" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Crunch</a></li>
                <li><a id="00006" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Power Milch</a></li>
                <li><a id="00007" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Toblerone</a></li>
                <li><a id="00008" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">KitKat</a></li>
                <li><a id="00009" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Cacao</a></li>
            </ul>
        </div>
    </div>
</div>

我的目的是单击无序列表中的任何链接，在

mfProductViewModel.selectedProducts

observable集合中添加所选产品，并在视图的

部分显示产品名称

你们中有人使用KnockOut.js面对过这种功能吗

---

非常感谢您分享您的知识。

可以选择的可用产品也是一种数据，因此属于ViewModel，而不是View（HTML文件）

然后简单地用knockout呈现列表：

<ul data-bind="foreach: products">
    <li><a href="#" data-bind="text: MfProductName, click: $root.addProduct"></a></li>
</ul>

---

稍微简化的示例：

我在视图中有可选择/可用的产品，因为它们来自服务器端，是ajax搜索的结果。我是否必须移动我的搜索功能才能由ViewModel处理/触发？@AntonioPesci您通常会使可用的产品也成为一个可观察的数组，将ajax调用放入视图模型，并在ajax请求完成后简单地填充可观察的数组。当数据可用时，视图将自动更新。

function mfProductViewModel() {
    // Data
    var self = this;
    self.selectedProducts = ko.observableArray([]);

    self.products = [
        new mfProduct({ MfProductId: '00001', MfProductName: 'Milky Way' }),
        new mfProduct({ MfProductId: '00002', MfProductName: 'Bocadin' }),
        // ...
    ];

    // Operations
    self.addProduct = function(data) {
        // add a copy to allow that the same item is added more than once
        self.selectedProducts.push(new mfProduct(data));
    };

    // ...
};

<ul data-bind="foreach: products">
    <li><a href="#" data-bind="text: MfProductName, click: $root.addProduct"></a></li>
</ul>