3

最初の Cycle.js プロジェクトを開始したいと考えており、友人と共同で開発します。彼は HTML デザイナーであり (HTML と CSS についてよく知っており、Handlebars テンプレートを作成しています)、私は JS について少し知っています。

HTML デザイナー <--> JS Dev フローを実行する方法に関するリソースがあるかどうかを知りたいです。
つまり、HTML リソースを別のファイルに抽出する方法です。

前もって感謝します

4

2 に答える 2

2

各画面には JavaScript の「表示」機能があり、ハイパースクリプト ヘルパーを使用して JavaScript でマークアップが記述されます。HTML マークアップからハイパースクリプト ヘルパーに変換する必要がある場合は、http://html-to-hyperscript.paqmind.com/を使用してください。

于 2016-02-08T08:00:41.010 に答える
0

私も同様の状況にあり、私はビジネス ロジックをプログラムし、娘は HTML と CSS をプログラムしています。そこで、hyperstreamに触発され、CycleJSはSnabbdom仮想 DOM ライブラリを使用するため、 snabbdom-template を作成しました。このモジュールは、標準の HTML タグ名とその他の CSS セレクターを対象とし、モック値を置き換えることにより、動的データを挿入します。

簡単なワークフローの例を次に示します。最初に、ビジネス ロジックとコア HTML をプログラムします。

main.js

...

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => div([
        div('#message', 'Ready.'),
        ul('#mapme', list.map(item => li(item)))
      ])
    )

  return {
    DOM: vdom$
  }
}

...

または — Babelとsnabbdom-jsxを使用している場合:

...
const vdom$ = data$
  .map(list =>
    <div>
      <div id="message">Ready.</div>
      <ul id="mapme">
        {list.map(item => <li>{item}</li>)}
      </ul>
    </div>
  )
...

div次に、「メッセージ」に設定されたメッセージが必要であり、その後に「mapme」に設定さidれた順序付けられていないリストが必要であると娘に伝えます。id彼女が以下を含むファイルを提供したとしましょう。

list.html

<div>
  <div id="message">Message goes here.</div>
  <ul id="mapme">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

次に、main.jsを次のように変更します。

...

const snabbdom_template = require('snabbdom-template')
const fs = require('fs')
const template = fs.readFileSync('list.html', 'utf-8')

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => snabbdom_template(template, {
      'div#message': 'Ready.',
      '#mapme': {_map: {'li': list}}
    }))

  return {
    DOM: vdom$
  }
}

...

browserifyを使用してmain.jsをバンドルするときに、 brfs変換を追加して、テンプレートをバンドルにハードコードします。

  browserify -t brfs main.js > bundle.js

現在、彼女はlist.htmlを更新できます— コア HTML と ID またはデータを対象とするために使用されるクラスが残っている限り — そして私がする必要があるのは再バンドルだけです。

于 2018-01-06T00:09:12.207 に答える