JsViews: встроенный синтаксис шаблона для элемента формы с прямой ссылкой

Я видел пример прямой ссылки на элемент формы с помощью JsViews, который, как мне показалось, предпочтительнее, чем инкапсуляция всей формы в шаблон. Вот пример jsfiddle того, что я пытаюсь сделать, что частично работает: http://jsfiddle.net/30jpdnkt/

var app = {
    selections: {
        things: [
            { Name: "thingName1", Value: "thingValue1" },
            { Name: "thingName2", Value: "thingValue2" },
            { Name: "thingName3", Value: "thingValue3" }
        ]
    },
    formData: {
        selectedThing: "thingValue1",
    }
};


//how do I reference this template in-line, outside of another wrapping template?
$.templates({
    theTmpl: "#theTmpl"
});

$("#content").link(true, app);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>


<script id="theTmpl" type="text/x-jsrender">
    <select id="thingChoice" data-link="formData.selectedThing">
        <option value="-">Please select</option>
        {^{for selections.things}}
        <option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>
        {{/for}}
    </select>
</script>

<div id="content">
    <!--this part works-->
    <input data-link="formData.selectedThing trigger=true"/>
    <!--this part does not display-->
    <span {{for data tmpl="theTmpl"/}}></span>
</div>

Тег INPUT, связанный с данными, правильно привязан к объекту, но я не могу найти рабочий пример того, как ссылаться на скомпилированный шаблон в строке, не инкапсулируя всю форму в другой шаблон. То, что можно использовать синтаксис канала передачи данных вне шаблона, дает надежду на то, что это возможно при правильном синтаксисе.

Это возможно?


templates inline jsviews
person Brian Hinckle    schedule 22.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, это возможно — я называю это связыванием данных верхнего уровня. Очень скоро появятся новые разделы документации по этому вопросу, а пока у вас есть этот образец:

http://www.jsviews.com/#samples/editable/toplevel-for

И ваш jsfiddle, который я обновил, чтобы он работал полностью: http://jsfiddle.net/30jpdnkt/1/< /а>

<div id="content">
    <input data-link="formData.selectedThing trigger=true"/>
    <span data-link='{for tmpl="theTmpl"}'></span>
</div>
person BorisMoore    schedule 23.10.2015