正确的 KO 绑定以访问数组中的对象？答案

【问题标题】：Correct KO binding to access objects within an array?正确的 KO 绑定以访问数组中的对象？
【发布时间】：2023-03-14 10:55:01
【问题描述】：

我有以下代码，并且我相信 ViewModel 的结构正确（我可能是错的），但我似乎无法正确访问这些值。

JavaScript 片段

注意：我正在使用带有 DurandalJS 和  样式绑定的 Hot Towel SPA 模板，但为了简单起见，我没有在这里展示。

var vm = {
    activate: activate,
    title: 'People',
    people: [
        new PersonItem('TestFirst', 'TestLast', 'first@last.com', '111.111.1111', 'bio here'),
        new PersonItem('TestFirst2', 'TestLast2', 'first2@last2.com', '222.222.2222', 'bio here')

    ],
    mytext: 'Oh Hey There'
};

return vm;

function PersonItem(firstname, lastname, email, phone, shortbio) {
    var firstName = firstname;
    var lastName = lastname;
    var emailAddress = email;
    var phoneNumber = phone;
    var shortBio = shortbio;

    var fullName = function () {
        return firstName + " " + lastName;
    };

    var imagePath = function() {
        return "/Content/images/Bio_" + firstName + "_" + lastName + ".jpg";
    };

    var resumePath = function () {
        return "/Content/Resumes/resume_" + firstName + "_" + lastName + ".pdf";
    };

我正在尝试的绑定

<div data-bind="text: mytext"></div>

<ul data-bind="foreach: people">
    <li data-bind="text: firstName"></li>
</ul>

问题

我看到创建了一个项目符号，这似乎表明正在找到该集合，但我尝试访问“firstName”的方式似乎无法正常工作。

我看到以下内容（注意文本字符串是绑定的，所以我知道淘汰赛正在做它的事情）：

我知道这可能是我的一个简单疏忽，但我似乎看不到它，而且 Google 让我空了（可能是因为我不确定要搜索什么）。

【问题讨论】：

介意做一个jsfiddle吗？我在我的 iPhone 上，现在不能，谢谢

标签： javascript knockout.js viewmodel single-page-application durandal

【解决方案1】：

在您的 PersonItem 中，您将 firstName 定义为变量声明时的私有属性。这表明它只在类本身内可见。

试试改成

this.firstName = firstname;

你也可能不想考虑使用 observables，如果值要改变的话。

this.firstName = ko.observable(firstname);

【讨论】：

工作就像一个魅力！知道这是一个简单的疏忽。谢谢！
我还会将你的函数内部更改为计算函数，这样如果可观察值发生变化，视图会自动更新

【解决方案2】：

这是因为你的 firstName 被声明为 var 所以它是函数内部的私有变量，而不是构造函数返回的对象的属性。使用this.firstName 而不是var firstName。

您在 jsfiddle 中运行的代码：http://jsfiddle.net/hC5Hf/

您的函数缺少右括号，并且激活在 vm 中被注释掉，因为它在您的示例中不存在。

【讨论】：