草庐IT

javascript - Polymer.js 双向绑定(bind)到 textarea 值

coder 2024-07-23 原文

在 0.5 版本中很简单:

<polymer-element name="textarea-tpl" attributes="value placeholder">
    <template>
        <link rel="stylesheet" type="text/css" href="css/index.css">

        <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea>
        <textarea id="hidden_textarea"></textarea>
    </template>
    <script>
        Polymer({
            ready: function() {
                var text = this.$.textarea;
                var hidden_text = this.$.hidden_textarea;

                text.onkeyup = function() {
                    hidden_text.value = text.value + "\n";
                    var height = hidden_text.scrollHeight;
                    text.style.height = height+'px';
                };
            }
        });
    </script>
</polymer-element>

在 1.0 版中，此绑定(bind)不起作用。只写作品而且很奇怪，只写一次。 v1.0 代码:

<dom-module id="chat-textarea">
    <template>
        <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea>
        <textarea id="hidden_textarea"></textarea>
    </template>

    <script>
        Polymer({
            is: "chat-textarea",
            properties: {
                value: String,
                placeholder: String
            },

            set text(val) {
                this.$.textarea.value = val;
            },
            get text() {
                return this.$.textarea.value;
            },

            ready: function() {
                var text = this.$.textarea;
                var hidden_text = this.$.hidden_textarea;

                text.onkeyup = function() {
                    hidden_text.value = text.value + "\n";
                    var height = hidden_text.scrollHeight;
                    text.style.height = height+'px';
                };
            }
        });
    </script>
</dom-module>

现在我使用 set\get 文本，但它不是属性，只能从 JS 获得。

在 iron-autogrow-textarea 中写道:因为 textarea 的值属性是不可观察的，所以你应该使用这个元素的绑定(bind)值来代替命令更新。 但为什么在 0.5 版本中 textarea 的值是可见的？

最佳答案

要绑定(bind)到 Polymer 1.0 中的输入值，请在要绑定(bind)到的变量后添加::input。

例子:

  <textarea value="{{taValue::input}}"></textarea>

这是 a working example on plnkr

像 iron-input 这样的元素使用 bind-input 属性来自动绑定(bind)变量。

更多信息在 two-way binding 的文档中

关于javascript - Polymer.js 双向绑定(bind)到 textarea 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31595316/

javascripttextarea34textpolymerpolymer-1.0

有关javascript - Polymer.js 双向绑定(bind)到 textarea 值的更多相关文章

  1. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  2. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. ruby - ruby 中绑定(bind)对象的实际使用 - 2

    昨晚，我在思考我认为是高级ruby​​语言的功能，即Continuations(callcc)和Bindingobjects。我的意思是高级，因为我有静态类型的oo语言背景(C#、Java、C++)，我最近才发现ruby​​，所以这些语言特性对我来说不是很熟悉。我想知道这些语言功能在现实世界中的用途是什么。根据我的经验，一切都可以用静态类型的oo语言来完成，但有时我不太同意。我想我在阅读SamRuby的那篇好文章时发现了Continuation的美妙之处/兴趣:http://www.intertwingly.net/blog/2005/04/13/Continuations-for-C

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - svn ruby​​ 绑定(bind)是否作为 gem 提供？ - 2

    我看到有几十个与svn相关的gem，但是我在其中任何一个上找到的少量文档表明它们是命令行包装器和杂项帮助程序。(svn命令、svn钩子(Hook)等)我在野外看到过执行以下操作的代码:require'svn/core'和SVN.Repos.add(...)，但该模块的作者通过apt-get提取了他的svnruby​​工具。这对我来说不是一个选择，因为我正在开发一个windows/osx工具。Thispage列出了一些项目，但特别是，我需要一些可以访问svn+ssh存储库的东西，而且我没有时间花一半的时间来挖掘文档-十几个项目，试图引导每一个。我在寻找哪个gem？从那里开始，我很乐意挖掘

随机推荐