Разница между jsRender и jsViews

таким образом, шаблоны jQuery никогда не пройдут бета-версию и помощью JsRender и jsViews предполагается заполнить пустоту. Я проверил примеры, опубликованные Борис Мур on на этой странице но я не понимаю разницы между JsRender и jsViews. Более того, Борис использовал одно в примере другого, чтобы добавить путаницы. Итак, вопрос в том, как связаны два из них (или разные)?

24
javascript jquery jquery-templates jsrender jsviews

3 ответов

JsRender-это механизм шаблонов. JsViews-это механизм привязки данных.

JsRender помогает визуализировать HTML с помощью шаблона (статический HTML / CSS со встроенными токенами, которые заменяются данными). Он поддерживает простую логику, значения рендеринга и пользовательские функции.

JsViews, который построен поверх JsRender, добавляет наблюдаемость к объектам / свойствам. Это позволяет связать объекты json с целями HTML и получить привязку данных 2 способами.

там больше для них, конечно, но это 60-секундный ответ. Это поможет?

49

jsRender - это просто шаблоны, где jsViews-это шаблоны, но также привязка данных. Поэтому, если вы просто хотите выводить данные из объекта, списка или класса, вы должны использовать jsRender. Следовательно, визуализируйте шаблон. jsViews, будет для привязки данных в реальном времени, среди многих других замечательных функций. Итак, если вы визуализировали шаблон, используя его, и имели поле, которое было databound, когда вы изменили его на стороне клиента, он фактически изменяет объект, из которого вы его получили.

для пример, вот реальное использование его в этом маленьком фрагменте из моей работы.

//this is the script that handles the template
<script id="questionResourceTemplate" type="text/x-jquery-tmpl">
    <li class="default-{{:IsDefault}}">
        <label data-link="visible{:!IsPageSpecific}" class="surv mleft5"><strong>{{:Type}}</strong></label>
        <label data-link="visible{:IsPageSpecific}" class="surv mleft5"><input type="text" data-link="Type" /></label>
        <a data-link="visible{:IsDefault}" href="#" action="deletequestionresource">Delete</a>
        <br />
        {^{for QuestionResourceTexts tmpl="#textTemplate" ~parentQuestionResource=#data ~textboxClass="textbox" /}}
   </li>
</script>

и именно здесь он используется в HTML

<ul class="question-resource-list">
    {^{for QuestionResources tmpl="#questionResourceTemplate" ~parentQuestion=#data /}}
</ul>

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

2

документы:

JsRender используется для рендеринга шаблонов в строки, готовые для вставка в DOM.

Он также используется платформой JsViews, которая добавляет привязку данных к Шаблоны JsRender, и обеспечивает полноценную платформу MVVM для легко создавать интерактивные управляемые данными одностраничные приложения и веб-сайты.

1