有没有办法使用JSX或类似的Backbone？

Question

我喜欢React的一个方面是将模板和视图代码放在同一个文件中(没有字符串连接).有没有办法在Backbone中做类似的事情？所以:

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

Answer 1

使用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>
    );
  }
});

当通过babel运行时给出:

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

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

有一些真正的库,但我不知道哪个与jsx互操作.

这是直接的答案,但为什么不直接使用React 与骨干？骨干网中的视图系统非常小,没有严格的应用程序^{[需要引用]}单独使用它.