JsViews: синтаксис строкового шаблона для элемента с прямой связью

Question

Я видел пример связывания непосредственно с элементом формы с помощью 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 Тег данных связан правильно привязан к объекту, но я не могу найти рабочий пример того, как ссылаться на скомпилированный шаблон в строке без инкапсуляции всей формы в другой шаблон. То, что можно использовать синтаксис линии передачи данных за пределами шаблона, дает надежду, что это возможно с правильным синтаксисом.

Возможно ли это?

Answer 1

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

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>