Question

    features:[
       "attributes": {"CityName": "asdfsad", "Population":"125005"}
    ]

    features:[
       "attributes": {"FirstName": "xyz"}
    ]
    ....

我在javascript对象中获取功能并将其添加到

中

queryResult =ko.observableArray()

但是你可以看到属性不是数组。所以我不能用foreach绑定它。功能对象属性属性彼此不同。

<div data-bind="foreach: queryResult">
    <span data-bind="text: $data"></span>
</div>

这会在span元素

中写入 [object Object]

<div data-bind="foreach: queryResult">
    <span data-bind="text: $data.CityName"></span>
</div>

这会在span元素中写入 asdfsad ，但其他要素属性没有名为 CityName 的属性

Answer 1

基本上敲除foreach绑定是用于同源数据。此外，如果Web API返回不同的集合，那么它不是一个好的设计。但是如果你仍然需要这个，你可以破解自定义绑定，例如：

ko.bindingHandlers.objectText = {
    update: function (element, valueAccessor, allBindingsAccessor, data) {
        var myobj = ko.utils.unwrapObservable(valueAccessor());
        if (!myobj) return;

        // dynamically extract data from the object
        var myproperty = "";
        if (myobj.CityName)
            myproperty = myobj.CityName;
        else if (myobj.FirstName)
            myproperty = myobj.FirstName;

        // if there is data, "redirect" to normal text binding
        if (myproperty)
            ko.bindingHandlers.text.update(element, function() { return myproperty; }, allBindingsAccessor, data);
    }
};

然后写下你的绑定：

<div data-bind="foreach: queryResult">
    <span data-bind="objectText: $data"></span>
</div>

这很难看，但你可以得到我希望的想法。这样您就可以将任何对象转换为任何类型的文本表示形式，例如，您可以找到第一个非空字符串属性，或者将所有非空属性与其名称连接起来等。

Answer 2

假设您不关心IE＆lt; = 8，请尝试http://jsfiddle.net/7y48q/

如果你想支持IE6,7,8，请加载underscore.js并用_.keys（结果）替换Object.keys（result）

<div data-bind="foreach: { data: queryResult, as: 'result'}">
    <hr/>
    <!-- ko foreach: { data: Object.keys(result), as: 'k' }  -->
      <span data-bind="text: k"></span>: <span data-bind="text: result[k]"></span><br/>
    <!-- /ko -->
</div>

Answer 3

不确定您的问题是什么，但如果您尝试展开所有对象，请尝试以下操作：

HTML：

<div id="bindingRoot">
    <div data-bind="foreach: queryResult">
        <div data-bind="crack: $data">
            <span data-bind="text: name"></span>: <span data-bind="text: value"></span><br />
        </div>
    </div>
</div>

JavaScript的：

var model = {
    queryResult: ko.observableArray()
};

model.queryResult.push({ CityName: 'asdfsad', Population: 125005 });
model.queryResult.push({ FirstName: 'xyz' });

ko.bindingHandlers.crack = {
    init: function () {
        return ko.bindingHandlers['foreach'].init.apply(this, arguments);
    },

    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor()),
            cracked = [];

        for (var k in value) {
            cracked.push({ name: k, value: value[k] });
        }

        return ko.bindingHandlers['foreach'].update.apply(this, [element, function () { return cracked; }, allBindings, viewModel, bindingContext]);
    }
};

ko.applyBindings(model, document.getElementById('bindingRoot'));

结果：

CityName: asdfsad
Population: 125005
FirstName: xyz

在这里演示：http://jsfiddle.net/Fng27/

用foreach淘汰绑定对象

3 个答案: