Разница между jsRender и jsViews - PullRequest
Новая
       31

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

24 голосов
/ 01 апреля 2012

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

Ответы [ 3 ]

50 голосов
/ 02 апреля 2012

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

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

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

Конечно, это еще не все, но это 60-секундный ответ. Это помогает?

2 голосов
/ 14 июня 2013

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

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

//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>

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

1 голос
/ 06 августа 2015

Из документов:

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

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

...