【问题标题】:Kendo databinding in templates模板中的剑道数据绑定
【发布时间】:2015-01-19 11:17:06
【问题描述】:

根据 kendo 文档,数据绑定是通过在模板中的元素上添加 data-bind 属性来完成的,kendo 框架将计算出细节。 我整理了一个简单的 js fiddle 来展示我遇到的问题,因为这似乎没有达到我的预期......

https://stackoverflow.com/questions/ask

<script id="string" type="text/x-kendo-template">
    <label>String</label>
    <input type="text" data-bind="value: data" />
</script>

<script id="number" type="text/x-kendo-template">
    <label>Number</label>
    <input type="number" data-role="numerictextbox" data-bind="value: data" />
</script>

<script id="date" type="text/x-kendo-template">
    <label>Date</label>
    <input type="date" data-role="datepicker" data-bind="value: data" />
</script>

<script id="editor" type="text/x-kendo-template">
    <h2>Object Id: #: id #</h2>
    <ul class="fields">
        <li data-template="string" data-bind="source: name"></li>
        <li data-template="number" data-bind="source: age"></li>
        <li data-template="date" data-bind="source: dob"></li>
    </ul>
</script>

<script>
    $(function () {
        var model = new kendo.observable({
            id: 1, age: 23, name: 'Smith', dob: '"1980-01-01T00:00:00Z"'
        });

        $(function () {
            kendo.bind($("#component"), model);
        });
    });
</script>

<div id="component"
     data-bind="source: this"
     data-template="editor" />

为什么这不能正确绑定字段中的值,因为我只是得到空文本框,暗示模板正在工作但绑定没有?

【问题讨论】:

    标签: javascript templates data-binding kendo-ui


    【解决方案1】:

    在一些扩展的电子邮件跟踪之后,基本的答案是“剑道不能这样工作”。 它似乎基于因绑定情况而异的约定/特殊行为,我似乎使用了错误的方法,并真正定义了为什么教程/演示似乎自相矛盾。

    警告人们。剑道不会对你不客气!

    【讨论】:

      【解决方案2】:

      这在模板中对我有用

       <script type="text/x-kendo-template" id="template">    
        <div class="k-edit-label"><label for="Name">Name</label></div>
      
        <input type="text" 
               class="k-input k-textbox" 
                name="Name" 
                data-bind="value: Name" 
                style="margin-left:10px">
           <br>
           <br
      <div class="k-edit-label"><label for="StudentId">Student Id</label></div>
             <input type="text" 
                    class="k-input k-textbox" 
                    name="StudentId" 
                    data-bind="value: StudentId" 
                    style="margin-left:10px">
        </script>
      

      【讨论】:

      • 如果你只使用 kendo.bind() 触发使用 data-bind="template: { name: 'template' }" 附加的模板,但如果你调用 kendo.render()使用该模板和它不使用的模型。我还发现对象、可观察对象和数据源以及各种元素绑定的某些组合并没有像您预期的那样完全吻合。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-07
      • 1970-01-01
      相关资源
      最近更新 更多