Javascript KnockoutJS绑定到键/值对

我正在尝试使用KnockoutJS绑定到键/值对数据：

this.personal = {
  "name" : "Chuck",
  "country" : "USA"
};

在我的HTML中，我使用$data绑定：

<ul data-bind="foreach: personal">

  <li data-bind="text: $data"></li>

</ul>

如果我想看这个，有人知道我的装订应该是什么样子吗：

name: Chuck

country: USA

换句话说…我如何显示属性名和属性值

编辑：有人指着我说：但我仍然希望绑定时不需要额外的库，我想你应该这样做

<ul data-bind="foreach: personal">
  <li data-bind=" text: country"></li>
  <li data-bind=" text: name"></li>
</ul>​

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    // Use an array here
    this.personal = [{
        "name": "Loek",
        "country": "Netherlands"
    }];
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());​

​
//这是一个简单的*viewmodel*-JavaScript，用于定义用户界面的数据和行为
函数AppViewModel（）{
//在这里使用数组
这是个人的[{
“名称”：“勒克”，
“国家”：“荷兰”
}];
}
//激活knockout.js
应用绑定（新的AppViewModel（））；​

拨弄

---

另外，在这篇文章之前我从未使用过knockoutJS，所以我不是世界级的专家。

试试这样的方法：

<ul data-bind="keyvalue: properties">
    <li>
        <span data-bind="text: key"></span> :
        <span data-bind="text: value"></span>
    </li>
</ul>

---

使用Knockout.js可以更轻松地绑定到键值对。假设您有一个如下所示的键值对

myItems: [
            { Name: 'Item 1', Value: 1},
            { Name: 'Item 3', Value: 3},
            { Name: 'Item 4', Value: 4}
        ],

只需使用以下html绑定到键值对

<select data-bind="options: myItems, optionsText: 'Name', optionsValue: 'Value'></select>

---

在视图模型中创建一个函数，用于将对象属性名称和值转换为具有包含上述名称和值的键和值属性的对象数组

var ExampleViewModel = function () {
    var self = this;

    self.personal = {
        "name": "Loek",
        "country": "Netherlands"
    };

    self.personalList = function () {
        var list = [];

        for (var i in self.personal) if (self.personal.hasOwnProperty(i)) {
            list.push({
                "key": i,
                "value": self.personal[i]
            });
        }

        return list;
    };
};

您的html模板应如下所示：

<ul data-bind="foreach: personalList()">
    <li data-bind="text: $data.key + ': ' + $data.value"></li>
</ul>





这将产生以下输出：


姓名：勒克
国家：荷兰

foreach
用于阵列。一个好的选择是将对象映射到一个数组，该数组包含具有键/值道具的项。看看这个答案，你会发现：嗨，尼古拉，谢谢你的快速回答，但这并不是我想要的。就我而言，我不知道个人物品的钥匙。因此，我想对personal对象进行foreach，并显示每个键（名称）和值。我希望您能进一步帮助我。@Loekvandenouveland如果您不知道personal对象中的键/值，为什么不使用for循环迭代这些键/值，然后在应用绑定之前动态构建DOM？
var ExampleViewModel = function () {
    var self = this;

    self.personal = {
        "name": "Loek",
        "country": "Netherlands"
    };

    self.personalList = function () {
        var list = [];

        for (var i in self.personal) if (self.personal.hasOwnProperty(i)) {
            list.push({
                "key": i,
                "value": self.personal[i]
            });
        }

        return list;
    };
};

<ul data-bind="foreach: personalList()">
    <li data-bind="text: $data.key + ': ' + $data.value"></li>
</ul>