Durandal 和 jqGrid答案

【问题标题】：Durandal and jqGridDurandal 和 jqGrid
【发布时间】：2014-02-25 17:10:03
【问题描述】：

已经有一个标有“jqGrid 与现有 Durandal 解决方案集成”的 jqxGrid 示例。但是，我没有使用 jqxGrid 的选项。

有没有人有使用 jqGrid 和 durandal 的例子。这就是我现在正在尝试的，但它不起作用。

无法解析绑定。绑定值：attr: { href: 'animals/' + id, title: name }, text: id 消息：id 未定义；

viewmodel.js

///

define(['durandal/app', 'jqgrid', 'kojqgrid'], function (app) {

var initialData = [
            { id: 1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
            { id: 2, name: "Speedy Coyote", sales: 89, price: 190.00 },
            { id: 3, name: "Furious Lizard", sales: 152, price: 25.00 },
            { id: 4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
            { id: 5, name: "Brooding Dragon", sales: 0, price: 6350 },
            { id: 6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
            { id: 7, name: "Optimistic Snail", sales: 420, price: 1.50 }
];

var ctor = function () {

    this.animals = ko.observableArray([]);
    this.disabled = ko.observable(false);

    this.activate = function () {
        this.animals(initialData);
        return true;
    }
};

//Note: This module exports a function. That means that you, the developer, can create multiple instances.
//This pattern is also recognized by Durandal so that it can create instances on demand.

return ctor;

});

查看 -------------------------------------------------- -----------------

<h3>Customers</h3>

<table id="animals" data-bind="grid: { data: animals }" >
    <caption>Amazing Animals</caption>
    <thead> 
        <tr> 
            <th data-field="actions" style="width:27px;"></th>
            <th data-field="name" width="150px">Item Name</th> 
            <th data-field="sales">Sales Count</th> 
            <th data-field="price">Price</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr>
            <td data-field="actions">
                <a class="grid-edit" data-bind="attr: { href: 'animals/' + id, title: name }, text: id"></a>
            </td>
        </tr>
    </tbody>
</table>

任何帮助将不胜感激。

【问题讨论】：

标签： jqgrid durandal

【解决方案1】：

您获得 id 的原因是未定义的，因为 ctor 函数没有公开 id 或 name 属性，而是公开了动物 observableArray。在您的视图中，您需要遍历动物 obserbavbleArray 以访问每个动物的 id 和 name 属性。试试下面的代码：

<tbody data-bind='foreach:animals'>
    <tr>
        <td data-field="actions">
            <a class="grid-edit" data-bind="attr: { href: 'animals/' + id, title: name }, text: id"></a>
        </td>
    </tr>
</tbody>

【讨论】：

感谢您提供帮助，但是，在此特定示例中，此解决方案无法解决我的问题。也许我解释得不够好。问题是 jqGrid 淘汰赛绑定似乎不适用于 durandal。上面的代码直接来自示例代码：github.com/CraigCav/Knockout-jqGridBinding 这似乎不适用于 durandal，即使它使用的是淘汰赛。
@JohnnyFever 这实际上与 Durandal 本身无关。

【解决方案2】：

您需要将activate 处理程序放在原型上：

ctor.prototype.activate = function () {...}

Durandal 可能找不到您的 activate 处理程序，因此从不初始化数据。

另外，我只能假设 jqGrid 绑定正在查看表定义并从 DOM 中获取构建正确绑定所需的内容。我这么说的原因是，严格来说，@nimrig 是对的：在某个地方需要有一个foreach。一定是jqGrid正在构建foreach。

【讨论】：