Question

我看到了很多淘汰赛foreach的例子。但是，这并不是我想要的。我是淘汰赛的新手。

我想在ajax响应数据上执行此操作，将其输入 ko.observableArray（），并以html内容显示foreach数据。

但是，我收到错误消息未捕获的ReferenceError：无法处理绑定“ src：$ data.productName”

我在这里发布我的html代码和js代码。

请帮助我。

HTML：

<input type="text" id="description" class="form-control" maxlength="255" data-bind="event:{keyup: doSomething},value: changeTextValue,valueUpdate:'afterkeyup'"></input>
<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:$data.productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:$data.productUrl}" target="_blank"><span data-bind="text:$data.productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:$data.productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:$data.productSku}">Sku: <span data-bind="text:$data.productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery：

return Component.extend({
        defaults:{
            changeTextValue: ko.observable(),
            anotherObservableArray : [],
            subscription : null,
            tracks: {
                    changeTextValue: true
              }
        },
        CourseViewModel : function(){
            var self = this;
            self.productName = ko.observable();
            self.productSku = ko.observable();
            self.imageUrl = ko.observable();
            self.productPrice = ko.observable();
            self.productUrl = ko.observable();
        },
        CeremonyViewModel : function () {
            var self = this;
            self.autocompleteData = ko.observableArray([new CourseViewModel()]);
            self.autocompleteData.push(new CourseViewModel());
        },
        initialize: function () {
            this._super();
        },
        doSomething : function(config){
            var self = this;
            if (this.subscription)
                this.subscription.dispose();

            this.subscription = this.changeTextValue.subscribe(function(newValue){
                if(newValue.length >= config.configValue){
                    fullScreenLoader.startLoader();
                    storage.post(
                        'abc/temp/temp',
                        JSON.stringify({'searchtext' : newValue}),
                        true
                    ).done(
                        function (response) {
                            /** Do your code here */
                            self.autocompleteData.push({productName:response.productName,imageUrl:response.imageUrl,productSku:response.productSku,productPrice:response.productPrice,productUrl:response.productUrl});
                            fullScreenLoader.stopLoader();
                        }
                    ).fail(
                        function (response) {
                            // fullScreenLoader.stopLoader();
                        }
                    );
                }
            });
        },
});
ko.applyBindings(new CeremonyViewModel());

Answer 1

您尝试过没有$data吗？

<div class="autocomplete-suggestions" data-bind="foreach: autocompleteData">
    <div class="autocomplete-suggestion" data-index="text: $index">
        <div href="#">
            <div class="suggestion-left">
                <img class="img-responsive" data-bind="attr: {src:productName}" alt="">
            </div>
            <div class="suggestion-right">
                <div class="product-line product-name">
                    <a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName}"></span></a>
                </div>
                <div class="product-line product-price">Price: <span data-bind="value:productPrice}"></span></div>
                <div class="product-des">
                    <p class="short-des" data-bind="attr : {id:productSku}">Sku: <span data-bind="text:productSku}"></span></p>
                </div>
                <div class="tranferdata">
                    <button id="search-item-list">Add Item</button>
                </div>
            </div>
        </div>
    </div>
</div>

如果这不起作用，则您的observableArray可能没有正确的数据/格式。在这种情况下，请在ajax调用后用console.log记录数组，然后添加到您的问题中。

淘汰赛：在ajax响应上将foreach数据绑定到html中

1 个答案: