javascript - 将 viewmodel 属性设置为列表中的项目

Question

好的，我有我的 View 模型

function viewModel(calendarData) {
            var self = this;

            self.Calendars = ko.mapping.fromJS(calendarData);
            self.ViewedCalendar = {};//what can/should i set this to be on initial creation?
            self.DisplayCalendar = function (calendar) {
                self.ViewedCalendar = calendar;
            };
        };

然后我就有了我的html:

<div data-bind="visible: Calendars().length > 0">
    <h2>You have <span data-bind="text: Calendars().length"></span> calendars</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Calendars</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Calendars">
            <tr>
                <td data-bind="text: Name"></td>
                <td><span data-bind="text: Events().length"></span> events</td>
                <td><a href='#' data-bind='click: $root.DisplayCalendar'>View</a></td>
            </tr>
        </tbody>
    </table>
</div>

<div data-bind="visible: ViewedCalendar() !== null">
    Your are viewing <span data-bind="text: ViewedCalendar.Name"></span><br />
</div>

我想要实现的是，当用户单击给定日历的“查看”时，通过 DisplayCalendar() 我将属性 ViewedCalendar 设置为给定日历。

这会显示我的 div，其中包含说明正在查看的日历的标签。

目前这些都是粗略的代码，只是为了实现基本功能，但我是 knockout 新手，因此需要一些帮助。

我收到 TypeError:ViewedCalendar 不是函数或 ViewedCalendar 未定义。

任何帮助将不胜感激。

Answer 1

ViewedCalendar 属性需要是一个可观察的对象，以便 knockout 才能了解其值的变化。您这样定义它:

self.ViewedCalendar = {};

这是一个(空)对象文字，而不是一个函数(如错误消息正确所述)。您需要的是:

self.ViewedCalendar = ko.observable();    // empty () give you an empty observable - no calendar selected yet

然后您可以在 click 处理程序中更新它:

self.ViewedCalendar(calendar);

这是一个完整的示例:

function viewModel(calendarData) {
            var self = this;

            self.Calendars = ko.mapping.fromJS(calendarData);
            self.ViewedCalendar = ko.observable();
            self.DisplayCalendar = function (calendar) {
                self.ViewedCalendar(calendar);
            };
        };

ko.applyBindings(new viewModel([{Name:'some calendar', Events: []}, {Name:'another calendar', Events: []}]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<div data-bind="visible: Calendars().length > 0">
    <h2>You have <span data-bind="text: Calendars().length"></span> calendars</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Calendars</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Calendars">
            <tr>
                <td data-bind="text: Name"></td>
                <td><span data-bind="text: Events().length"></span> events</td>
                <td><a href='#' data-bind='click: $root.DisplayCalendar'>View</a></td>
            </tr>
        </tbody>
    </table>
</div>

<div data-bind="with: ViewedCalendar">
    Your are viewing <span style="font-weight: bold" data-bind="text: Name"></span><br />
</div>