Question

我有一个jquery ajax帖子，当用户在文本框中写入并按回车时，这个ajax触发器然后它从后端获取一个值并在<pre> html元素中显示结果。 http://jsfiddle.net/LQg7W/2133/显然这个jsfiddledoes没有显示任何东西，因为我没有把ajax帖子放在里面。

我希望在加载页面时此文本值具有默认值。比如“输入您的值：”但是如何将此值发送到模板中的文本框？所以我想做的是将这个defult值从我的视图发送到模板。

这是用户按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>

Answer 1

（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后运行。

Answer 2

如果您正在寻找一种方法来将视图中的数据输入模板，那么它取决于您的模板框架，如何完成此操作。使用下划线模板，您可以执行以下操作：在你的渲染方法中：

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。

如何在javascript骨干中将视图中的值发送到模板

2 个答案: