Есть ли способ использовать JSX или аналогичный с Backbone?

Question

Одна из вещей, которые мне нравятся в React, заключается в том, чтобы поместить шаблон и просмотреть код в том же файле (без конкатенации строк). Есть ли способ сделать что-то подобное в Backbone? Итак:

var MyView = Backbone.View.extend({ 
    render() { 
    return (
     <div>blah blah</div> 
    ); 
    } 
}); 

Answer 1

РЕАКТ JSX transpiler используется для требуют использования прагму комментария указать на объект, содержащий тег название функции transpile JSX тегов на вызовы функций. Это позволило предоставить вам собственный бэкэнд и использовать его вместо React.DOM - один из основных разработчиков сделал бэкэндом DOM в качестве примера: JSXDOM.

С тех пор ситуация немного изменилась - комментарий прагмы больше не требуется, и Transpiler React's JSX предполагает, что вы используете React и пересылаете вызовы React.createElement(). Учитывая это, другой вариант состоит в том, чтобы просто скопировать код перезаписи JSX React и настроить его для вывода чего-то другого - для примера этого я сделал это с MSX, что позволяет использовать JSX с Mithril.

---

Babel также имеет реализацию transpiler JSX для React. Babel также поддерживает плагины. Было бы идеально, если бы вы могли использовать JSX в любом месте и сказать Babel, что вы хотите, чтобы он переместился с помощью плагина, но в прошлый раз, когда я смотрел, я не мог видеть простой способ повторно использовать кишки трансилятора JSX Babel и просто настроить вывод.

---

Вы также можете сохранить шаблон в представлении, используя библиотеку регулярных DOM здания в методе render(). creationix/dombuilder был моим фаворитом, когда я работал с Backbone, но в JSON-ML есть десятки встроенных библиотек DOM и функциональных вызовов.

Answer 2

С Babel вы можете указать правую сторону @jsx, указывающую на любую функцию с сигнатурой function(type, props, ...children){}.

Вот минимальный самостоятельный пример (не используйте его в процессе производства, он не избегает детей).

// jsx.js 
// don't ask why it's all weird looking... 
function stringJsxThingy(function(tag,props){return"<"+tag+"\x20"+Object['keys'](props||{})['map'](function(key){return(key+'="'+props[key]['replace'](/"/,'&quot;')+'"')})['join']('\x20')+'>'+[]['slice']['call'](arguments,2)['join']('')+'</'+tag+'>';}); 

И если вы включить, что на вашей странице, и включают в себя следующее:

// MyView.js 

/** @jsx stringJsxThingy */ 
var MyView = Backbone.View.extend({ 
    render() { 
    this.$el.html(
     <div class="hello">hey</div> 
    ); 
    } 
}); 

Который при запуске через Вавилонской дает:

/** @jsx stringJsxThingy */ 
"use strict"; 

var MyView = Backbone.View.extend({ 
    render: function render() { 
    this.$el.html(stringJsxThingy(
     "div", 
     { "class": "hello" }, 
     "hey" 
    )); 
    } 
}); 

Есть некоторые реальные библиотеки там, но я не знаю, с кем лучше общаться с jsx.

---

Это был прямой ответ, но почему бы не просто использовать Реагировать с позвоночника? Система просмотра в позвоночнике настолько минимальна, что нет серьезных приложений ^{[править]} использовать его в одиночку.

Answer 3

Дело в JSX заключается в том, что оно переводится в древовидную структуру, поэтому его можно использовать для создания DOM или виртуального DOM. Если вы используете строковые шаблоны, вам это действительно не нужно. Например, вы можете использовать литералы шаблона строки ES6:

var MyView = Backbone.View.extend({ 
    render() { 
    const name = this.model.get('name'); 
    this.$el.html(` 
     <div class="hello">hello, ${name}!</div> 
    `); 
    } 
});