标签: kendo-mvvm

我有一个使用MVVM的kendo网格.我的问题是我似乎无法使用隐藏属性和表达式设置列可见性:

data-columns=
             "[{'template':'# if (User!=null) { # #=User.Name# # } #',
             'title':'User', 'hidden': User==null}

模板有效,但"隐藏"属性似乎没有.

有没有办法让这个工作？

我有以下小提琴.我正在尝试为数组汽车内的每个元素调用父方法lowestMpgMsg.我尝试使用以下绑定而没有运气:

data-bind="text: lowestMpgMsg()"
data-bind="text: parent.lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg"

谢谢!

这是我的HTML

<div class="container">
<div id="template-container" data-template="template" data-bind="source: cars"></div>
<script id="template" type="text/x-kendo-template">
    <div>
        <span data-bind="text: brand"></span> - 
        <span data-bind="text: mpg"></span> - 
        <span data-bind="text: lowestMpgMsg()"></span> - 
    </div>
</script>

这是我的javascript

var viewModel = kendo.observable({
    cars: [
        {brand: "Toyota", mpg: 22},
        {brand: "Mini", mpg: 32},
        {brand: "Honda", mpg: 23}
    ],
    lowestMpgMsg: function(e) {
        var sorted = this.cars.sort(function(a, b) {
            return a.mpg - b.mpg > 0;
        });

        return e.mpg > sorted[0].mpg ? "no" …

我只是想遍历Kendo.View中的数组，并尝试从元素中渲染属性。这在MVC Razor中将非常简单，例如

@foreach( var displayLink in Model ) {
 <h1>displayLink.Text</h1>
}

与其选择摘录，我只是共享了整个文件。

所有这些都会运行，没有异常等。该视图呈现静态内容，但不呈现循环的内容。我打开了evalTemplate = true，但仍然没有骰子。我一直找不到任何方法可以做到这一点，这让我发疯。我所能找到的是连接Kendo UI ListView等的方法。我不想那么重，我只想直接遍历数组。

Index.htm（视图）：

<div class="jumbotron">
    <div class="container">
        <h1>Web</h1>
        <p>The future is <i>now</i>.
        </p>
    </div>
</div>


# for(var i = 0; i < DashboardLinks.length; i++) { #
    <h1>#= DashboardLinks[i].TitleText #</h1>
# } #

控制器：

define(
    // == INTERFACE NAME ==
    "Controllers.IHome", 

     // == DEPENDENCIES ==
    [
        "Util.IGetViewSource", 
        "Util.ILayout",
        "ViewModels.Home.IHomeVM"
    ],

    function ( /* Dependency injections: */ getViewSource, layout, iHomeVM)
    {

        // Define the module. …

我能够在控制台上设置备注，但是我不知道一旦用户保存更改，如何将备注值设置到网格中。

反正有手动设置值到剑道网格吗？

示例输出

         |Remark         |User Name|Phone Number|Country
 [unable]|username length|ad       |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

用户编辑表格后-输出

         |Remark         |User Name|Phone Number|Country
 [enable]|               |admin1   |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

该代码段中提供了项目示例。

         |Remark         |User Name|Phone Number|Country
 [unable]|username length|ad       |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

         |Remark         |User Name|Phone Number|Country
 [enable]|               |admin1   |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

var defaultData = [{
  reason: "",
  userName: "ad",
  phoneNumber: "0123456789",
  country: …

我在列表视图中使用 Kendo UI 下拉列表

<ul data-role="listview" id="participants-listview" data-style="inset" data-template="participants-listview-template" data-bind="source: participants, events { click: onSelectParticipant }" />

<script type="text/x-kendo-template" id="listview-template">
    <div>
            <span>#:RoleDesc#</span> 
            <span>
                <select data-role="dropdownlist" id="status-id"
                        data-text-field="StatusDesc" 
                        data-value-field="StatusId"
                        data-bind="value: StatusId, source: participantStatuses, events: { change: onParticipantStatusChange }" 
                        name="Status" 
                        required="required" 
                        validationMessage="required">
                </select>
            </span> 
    </div>
</script>

视图模型

viewModel = kendo.data.ObservableObject.extend({
    dataSource: new kendo.data.DataSource({
            transport: {
                type: "odata",
                read: {
                    url: function() {
                        return meetings/participants";
                    }
                }
              }        
        }),
    participants: [], //listview data
    participantStatuses: [   // dropdownlist selection 
            { StatusId: 1, StatusDesc: "Invited" …

请在下面找到我的代码：

客户搜索表单模板

<script type="text/x-kendoui-template" id="customer-search-view-template">
    <div class="searchform" id="searchCustomer">
        <form class="frmSearch">
            <input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
            <button class="k-button" data-bind="click: searchClicked">Search</button>
            <button class="k-button" data-bind="click: newClicked">New</button>
        </form>             
    </div>
</script>

customer-search.js 在哪里加载上面的模板并创建 viewmodel 对象

$(function(){

    var views = {};
    templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");

    var layout = new kendo.Layout($('#customer-search-view-template').html());
    layout.render($("#main"));

    // Create an observable view model object.
    var customer = kendo.observable({
        customerName: "John",

        searchClicked: function() {
            this.set("customerName", "Search clicked");         
        },

        newClicked: function() {
            this.set("customerName", "New clicked");            
        }

    });

    // Bind the view model to the personFields …

我阅读了文档,但没有发现与在dataSource网址中设置参数有关.是否有可能实现这一目标？

Thx提前.

也许我误解了剑道MVVM实现的概念,但是......我有一个简单的Kendo UI Mobile view,它与视图模型绑定数据:

var myViewModel = kendo.observable({
    myEntity: null,

    onViewShow: function (e) {
        var bindingEntity = myStaticDataSource[0];
        myViewModel.set("myEntity", bindingEntity);
    }
});

myStaticDataSource是一个静态的"实体"数组,作为简单的JavaScript对象,其字符如name或description.

视图及其输入字段绑定到视图模型:

<div data-role="view" data-layout="default" data-model="myViewModel" data-bind="events: { show: onViewShow }">
    <form>
        <ul data-role="listview" data-style="inset">
            <li>
                <label>
                    Name
                    <input type="text" data-bind="value: myEntity.name" />
                </label>
            </li>
        </ul>
    </form>
</div>

当用户改变输入字段时,name在数据绑定视图模型实体中更新相应字段(例如)myEntity.但是:我所期望的是实体myStaticDataSource也会更新,因为我不是克隆对象.但事实并非如此!它的价值仍然保留在原始价值上.为什么是这样？我错过了一些关于剑道MVVM处理的东西吗？

我正在使用 kendo observable 来绑定页面。以下代码按我的预期工作，IssueHeaders是一个对象数组，它有两个项目。第一个模板正确渲染两次，其子模板正确渲染 8 次。

 <div data-template="issue-detail-template" data-bind="source: IssueHeaders"></div>

<script id="issue-detail-template" class="issue-detail-template"  type="text/x-kendo-template">        
    <div  data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div>
</script>

<script id="issue-group-detail-template" class="issue-group-detail-template" type="text/x-kendo-template">
    <span class="kptext" data-bind="text : Name"></span> 
</script>

但是当我将 Name 添加到第一个模板时，它只呈现第一项。

<script id="issue-detail-template" class="issue-detail-template"  type="text/x-kendo-template">
    <span data-bind="text : Name"></span>
    <div  data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div>
</script>

为什么 ？我做错了什么？

我需要在网格行和详细信息视图上绑定一些事件.我正在使用一个可观察的视图模型,其中注册了一些事件,并尝试使用行模板和详细信息模板将它们绑定到DOM.到目前为止没有进展.

$("#grid").kendoGrid({
    sortable:true,
    rowTemplate:'<tr class="k-master-row"> 
         <td class="k-hierarchy-cell"><a class="k-icon k-plus" href=""></a></td>
        <td><a data-bind:"click:highlight">click in row ${id}</a></td><td>${bool}</td>
    </tr>',
    detailTemplate:'<a data-bind:"click:highlight">click In details ${id}</a>',
    columns: [{field:'id',sortable:false}, {field:'bool'}],
    dataBound: function(e) {
      var grid=$("#grid").data('kendoGrid');
      grid.expandRow("tr.k-master-row");
    }
});


var model=( {
    highlight:function(){
       console.log(this.id);
    },
   items:[{id: 1123, bool: true}, {id: 223, bool: false}]
});
kendo.bind($("#grid"),kendo.observable(model));

这是jsFiddle http://jsfiddle.net/amGmr/9/ .是否有可能使用MVVM绑定事件与网格？