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

One of the things I like about React is putting the template and view code in the same file (without string concatenation). Is there a way to do something similar in Backbone? So:

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

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

3 个解决方案

#1

With Babel you can specify a @jsx pragma pointing to any function with the signature function(type, props, ...children){}.

使用Babel,您可以使用签名函数(type,props,... children){}指定指向任何函数的@jsx编译指示。

Here's a minimal self contained example (don't use this in production, it doesn't escape 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+'>';});

And assuming you include that on your page, and include the following:

假设您在页面上包含该内容,并包含以下内容:

// MyView.js

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

Which when run through babel gives:

当通过babel运行时给出:

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

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

There are some real libraries out there, but I don't know which interop with jsx well.

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

That was the direct answer, but why not just use React with backbone? The view system in backbone is so minimal that no serious applications ^{[citation needed]} use it alone.

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

#2

React's JSX transpiler used to require the use of a pragma comment to specify on object containing tag-named functions to transpile JSX tags to function calls. This made it possible to provide your own backend and use it instead of React.DOM - one of the core developers made a DOM backend as a an example: JSXDOM.

React的JSX转换器过去需要使用pragma注释来指定包含标记命名函数的对象,以将JSX标记转换为函数调用。这使得有可能提供自己的后端并使用它而不是React.DOM - 其中一个核心开发人员将DOM后端作为一个例子:JSXDOM。

Things have changed a bit since then - the pragma comment is no longer required and React's JSX transpiler assumes you're using React and transpiles to React.createElement() calls. Given that, another option is to simply copy React's JSX transpiling code and tweak it to output something else - for an example of doing this, I did this with MSX, which allows you to use JSX with Mithril.

从那时起事情发生了一些变化 - 不再需要pragma注释,React的JSX转换器假设您正在使用React并转换为React.createElement()调用。鉴于此,另一种选择是简单地复制React的JSX转换代码并调整它以输出其他东西 - 举例来说,我用MSX做了这个,它允许你使用Mithril的JSX。

Babel also has an implementation of a JSX transpiler for React. Babel supports plugins, too. It would be ideal if you could use JSX anywhere and tell Babel what you want it to transpile to with a plugin, but last time I looked, I couldn't see an easy way to reuse the guts of Babel's JSX transpiler and just tweak the output.

Babel还为React实现了一个JSX转换器。 Babel也支持插件。如果您可以在任何地方使用JSX并告诉Babel您希望它通过插件转换为什么将是理想的,但上次我看,我看不到一种简单的方法来重用Babel的JSX转换器的胆量并只是调整输出。

You could also keep the template in the view by using a regular DOM building library in your render() method. creationix/dombuilder used to be a favourite of mine when I was working with Backbone, but there are dozens of DOM building libraries in JSON-ML and function call flavours.

您还可以使用render()方法中的常规DOM构建库将模板保留在视图中。在我使用Backbone的时候,creationix / dombuilder曾经是我的最爱,但是JSON-ML中有许多DOM构建库和函数调用。

#3

The thing about JSX is that it is transpiled to a tree structure so it can be used to create DOM or virtual DOM. If you are using string-based templating you don't really need that. For example, you can use ES6 string template literals:

关于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>
    `);
  }
});

#1