0

I have a jquery ajax post and when a user write and press enter in a textbox this ajax triggers then it fetches a value from backend and show the result in a <pre> html element. http://jsfiddle.net/LQg7W/2133/ obviuosly this jsfiddledoes not show anything because I sis not put the ajax post inside it.

I want this text value have a default value when I load the page. like "Enter your value:" but how can I send this value to the textbox which is in template? So what I want to do is to send this defult value from my view to template.

here is my view code when the user hit enter:

if(e.keyCode == 13) {

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

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

             }

        }

and this is how I render my template (textbox is inside this template)

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

and this is my template:

<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

（该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 回答
0

如果您正在寻找一种将数据从视图输入到模板的方法，那么这取决于您的模板框架，以及如何完成。使用下划线模板，您可以这样做：在您的渲染方法中：

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 回答