标签: jsviews

所以jQuery模板永远不会超过beta,jsRender和jsViews应该填补空白.我查看了Boris Moore在此页面上发布的示例,但我没有区分jsRender和jsViews.此外,鲍里斯在另一个例子中使用了一个来增加混乱.所以问题是他们中的两个如何相关(或不同)？

当数据链接到一个表单导致我重新质疑究竟是什么数据绑定时,我遇到奇怪的行为？

基本上我有一个表单,可以创建新公司并更新它们.实际的创建/更新是通过ajax完成的,这就是我为同时使用相同表单的原因.在我必须创建公司的情况下,一切都按照我的预期运作.但是,当我必须更新公司时,事情并不像我期望的那样有效.请查看以下代码.

这是我的示例表单HTML:

<div id="result"></div>

<script type="text/x-jsrender" id="CompanyFormTemplate">
    <form>
        <input type="text" data-link="Company.Name" />
    </form>
</script>

这是我的Javascript代码:

var app = new CompanyFormContext();

function CompanyFormContext() { 
    this.Company = {
        Name: ''
    };

    this.setCompany = function (company) {
        if (company) {
            $.observable(this).setProperty('Company', company);
        }
    };
};

$(function () {
    initPage(); 

    ...

    if (...) {
        // we need to update company information

        app.setCompany({ Name: 'Company ABC' });
    }
});

function initPage() {
    var template = $.templates('#CompanyFormTemplate');
    template.link("#result", app);
}

它不是显示"公司ABC"的表单输入,而是空的.但是,如果我在其中输入任何内容,那么Company.Name值确实会发生变化!但是,虽然我希望数据输入绑定到我的Company对象的Name属性,但我也希望它知道对(父)Company对象所做的任何更改,并相应地更新它绑定到它的Name属性的数据.

所以我的问题是我应该如何改变我编写这段代码的方式,以便我可以在根对象和属性上实现数据绑定？

如何仅从我的json数据循环选定的组/对象列表？例如,我只想在下面的例子中循环"ID2",

JSON,

 { 
"ID1": {
        "items":{
            "0": "VALUE1",
            "1": "VALUE2",
            "2": "VALUE3",
            "4": "VALUE4"
        }
    },
"ID2": { 
        "items": {
            "0": "VAL2-1",
            "1": "VAL2-2",
            "2": "VAL2-3"
        }
    }
}

JS,

myTmpl2 = $.templates("#myTmpl2");
    $("#result2").html(
        myTmpl2.render(data2)
    );

模板,

<script id="myTmpl2" type="text/x-jsrender">
{{props #data}}
    <tr>
            <td>{{:key}}</td>

                {{for prop}}
                    {{props items}}

                     <td>{{>key}} - {{>prop}}</td>

                    {{/props}}
                {{/for}}


            </tr>
{{/props}}
</script>

结果,

ID1     0 - VALUE1  1 - VALUE2  2 - VALUE3  4 - VALUE4
ID2     0 - VAL2-1  1 - …

我用Twig.它使用这些标签:{{ name }}

我想在我的项目中包含JsRender.但是JsRender也使用相同的标签{{:name}},因此存在冲突并且没有任何作用.如何使用自定义标记更改默认的JsRender标记,比如类似Ruby<%= name %>

UPD:

出于某种原因,我无法使用控制流标记,for使用自定义标记的行为不符合预期.为什么会这样？

这是一个模板:

<script id="myTmpl" type="text/x-jsrender">
    <%!-- This is a copmment %>
    <% for data %>
        <%:key%>
    <% /for %>
</script>

这是js代码:

var template = $.templates("#myTmpl");
var htmlOutput = template.render(data);
$(".div").html(htmlOutput);

这是一个渲染结果:

<%!-- This is a copmment %> <% for data %> <% /for %>

我有一个select使用jsViews绑定到服务器的某些值.我已成功设法显示选项,但我希望能够跟踪并将select选项设置为我的JavaScript对象中的值.这是我的代码:

<select id="albumChoice" data-link="selectedAlbum">
    <option value="-">Please select</option>
    {^{for albums}}
    <option data-link="{value{:id} text{:name}} selected{:selectedAlbum}}"></option>
    {{/for}}
</select>

完整的示例代码就在这个小提琴中:http://jsfiddle.net/4ZevT/

正如您所看到的,我尝试使用选定的{:selectedAlbum},但这并没有做任何事情.我必须做什么,以便在页面加载到服务器的值时自动设置该选项.