将viewmodel属性设置为列表中的一项

Question

好的，所以我有我的视图模型

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，其中包含说明正在查看什么日历的标签。

刚开始时，这些都是粗糙的代码，只是为了实现基本功能，但是我是新手，可以使用一些帮助。

我收到TypeError：不是已查看函数的函数，或者未定义函数。

任何帮助将非常感激。

Answer 1

该ViewedCalendar属性必须是可观察的淘汰赛达到它的价值变化。 您是这样定义的：

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>