0

jquery ajaxの投稿があり、ユーザーがテキストボックスに書いてEnterキーを押すと、このajaxがトリガーされ、バックエンドから値がフェッチされ、結果が<pre>html要素に表示されます。http://jsfiddle.net/LQg7W/2133/明らかに、このjsfiddleは何も表示しません。なぜなら、私はその中にajax投稿を入れていないからです。

ページをロードするときに、このテキスト値にデフォルト値を設定したい。「値を入力してください:」のようなものですが、この値をテンプレートにあるテキストボックスに送信するにはどうすればよいですか? したがって、私がやりたいことは、このデフォルト値をビューからテンプレートに送信することです。

ユーザーがEnterキーを押したときのビューコードは次のとおりです。

if(e.keyCode == 13) {

            var currentLine = $('#terminal').text();
            var inputData = $(e.currentTarget).val();

            $('#terminal').text(currentLine + "\r\n" + inputData + "\r\n");
            AjaxPost(inputData);

             }

        }

これが私のテンプレートをレンダリングする方法です（テキストボックスはこのテンプレート内にあります）

 this.$el.html(this.cliTerminalTemplate());

これは私のテンプレートです：

<div class="row" id="box">
  <div  class="large-12 columns" >
  <pre id="terminalPre" width="2">
    <code id="terminal" style="color: #fff; padding: 1em;" ></code>
  </pre>
  <input type="text" id="textInput" name="" border: none;" autofocus>
  </div>
</div>
4

2 に答える 2

0

ビューからテンプレートにデータを入力する方法を探している場合は、テンプレート フレームワークに依存しますが、これがどのように行われるかによって異なります。アンダースコア テンプレートを使用すると、これを行うことができます: render メソッドで:

var template = _.template( window.Template, {content:this.content} );

あなたのテンプレートで：

<code id='terminal' style='color: #fff; padding: 1em;' ><%= content %></code>

ここに完全な jsFiddle があります: jsFiddle

この場合、ビュー全体を再レンダリングすることはあまり役に立ちません。あなたが本当にそのようなものを探しているなら、私に知らせてください。私は例をリファクタリングします.

編集：

スクロールバーには CSS 属性を使用しますoverflow:auto。インライン CSS は適切な方法ではないことに注意してください。別のファイルで CSS を定義する必要があります。jsFiddle リンクも更新しました。自動スクロールの高速な解決策が見つかりませんでした。現在、ここドイツでは遅れています:D.

于 2013-09-13T19:48:24.013 に答える
0

(input要素が壊れているように見えます。テンプレート エンジンが属性であるべきもので奇妙なことをしない限りstyle。)

inputそれはさておき、テンプレートの要素に値を追加することはできますか? このようなもの：

<input type="text" id="textInput" value="Enter your value:" name="" border: none;" autofocus>

または、それは実際には「値」ではなく単なる説明テキストであるため、代わりにプレースホルダーになる可能性があります。

<input type="text" id="textInput" placeholder="Enter your value:" name="" border: none;" autofocus>

テンプレートを変更できない、または変更しない場合は、ページの読み込み時にテンプレートの外部で JavaScript コードを実行して値を設定できます。

$('#textInput').val('Enter your value:');

または、プレースホルダーの場合:

$('#textInput').prop('placeholder', 'Enter your value:');

inputこのコードは、 が DOM に追加された後に実行するだけで済みます。

于 2013-09-13T16:52:56.063 に答える