как использовать шаблон с нокаутом, отображением нокаута и jsrender

Я хотел бы использовать шаблон jsRender для рендеринга fullName, который является просто firstName + ' ' + lastName. Вместо рендеринга шаблона с данными он просто рендерится как {{=firstName}} {{=lastName}}. Как я могу заставить это работать?

Живой пример: http://jsbin.com/inijay/2/edit

JS:

var data = { "firstName": "Ian", "lastName": "Davis" };
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

HTML:

<input data-bind="value: firstName" type="text" />
<input data-bind="value: lastName" type="text" />
<span data-bind="template: 'fullNameTemplate'"></span>

Шаблон:

<script id="fullNameTemplate" type="text/x-jquery-tmpl">
  {{=firstName}} {{=lastName}}
</script>

Как выглядит вывод: вывод сломанного шаблона jsrender


knockout.js jsrender knockout-mapping-plugin
person Ian Davis    schedule 03.10.2012    source источник
comment
Если вам действительно нужно использовать jsRender, взгляните на ответ на этот вопрос: Библиотека шаблонов для сторонних разработчиков Knockoutjs jsrender"> stackoverflow.com/questions/11077539/. Пример механизма шаблонов для jsRender, который правильно его обрабатывает: jsfiddle.net/rniemeyer/MvCjB   -  person RP Niemeyer    schedule 04.10.2012

Ответы (2)


arrow_upward
2
arrow_downward

Вам придется установить свой собственный templateEngine. Вот готовый результат: http://jsbin.com/inijay/3/edit.

Вот соответствующий код:

ko.jsrenderTemplateEngine = function () { };
ko.jsrenderTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    renderTemplateSource: function (templateSource, bindingContext, options) {
        // Precompile the wrapping div for templating
        var precompiled = templateSource['data']('precompiled');
        if (!precompiled) {
            precompiled = $('<div>', { text: templateSource.text() });
            templateSource['data']('precompiled', precompiled);
        }
        // Unwrap observables
        var unwrapped = ko.mapping.toJS(bindingContext.$data);
        // Render and parseHTMLFragment
        return ko.utils.parseHtmlFragment(precompiled.render(unwrapped));
    }
});
ko.setTemplateEngine(new ko.jsrenderTemplateEngine());

Я также изменил ваш шаблон jsrender:

<script id="fullNameTemplate" type="text/x-jquery-tmpl">
    {{:firstName}} {{:lastName}}
</script>

Я заимствовал базовый дизайн кода отсюда: binding.html#note_6_using_the_underscorejs_template_engine

С другой стороны, это решение не кажется таким уж быстрым, потому что оптимальность jsrender отрисовывается бесполезно из-за необходимости постоянно разворачивать наблюдаемые объекты. Я считаю, что вместо этого было бы лучше использовать нативные шаблоны Knockout.

person Royce Feng    schedule 03.10.2012
comment
как бы вы использовали собственные шаблоны Knockout для этого сценария? - person Ian Davis; 04.10.2012

arrow_upward
0
arrow_downward

Решение с использованием jQuery.tmpl: http://jsbin.com/inijay/5/edit Документация говорит что к этому моменту он обновится до jsRender, но, по-видимому, нет. Документация здесь: Knockoutjs.com/documentation/template-binding.html

person Ian Davis    schedule 04.10.2012