草庐IT

knockout.js 和禁用 anchor 标记

coder 2024-05-12 原文

如何使用此自定义绑定(bind)禁用和启用 anchor 标记。它适用于输入元素，但 anchor 标记只是更改 CSS，而不是禁用。

<a href="link" data-bind="myDisabled: !enabled()"/>

ko.bindingHandlers.myDisabled = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {return { disabled: value }; });
        ko.bindingHandlers.disable.update(element, valueAccessor);
    }
};

最佳答案

您需要在绑定(bind)处理程序中捕获点击事件。

HTML:

<a href="link" data-bind="disableClick: !enabled()">test</a>
<br/><br/><br/>
<input type="checkbox" data-bind="checked: enabled"> enabled ​

JavaScript:

ko.bindingHandlers.disableClick = {
    init: function (element, valueAccessor) {

        $(element).click(function(evt) {
            if(valueAccessor())
                evt.preventDefault();
        });

    },

    update: function(element, valueAccessor) {        
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {return { disabled_anchor: value }; });
    }
};

ko.applyBindings({ enabled: ko.observable(false)});

这是一个工作示例:

http://jsfiddle.net/kp74u/54/

更新 1:如果您需要防止在附加 knockout 绑定(bind)处理程序后绑定(bind)其他事件处理程序，您需要将 stopImmediatePropagation 添加到事件处理程序以及 防止默认。

示例:http://jsfiddle.net/kp74u/55/

更新 2:如果您想禁用所有事件处理程序(连同绑定(bind)处理程序之前附加的点击事件处理程序，您需要“破解”jquery 事件数组)。请注意，这可能不适用于其他版本的 jquery(示例使用 1.7):

ko.bindingHandlers.disableClick = {
    init: function(element, valueAccessor) {

        $(element).click(function(evt) {
            alert('test before');
        });

        $(element).click(function(evt) {
            if (valueAccessor()) {
                evt.preventDefault();
                evt.stopImmediatePropagation();
            }
        });

        //begin of 'hack' to move our 'disable' event handler to top of the stack
        var events = $.data(element, "events");
        console.log(events);
        var handlers = events['click'];

        if (handlers.length == 1) {
            return;
        }

        handlers.splice(0, 0, handlers.pop());
        //end of 'hack' to move our 'disable' event handler to top of the stack


        $(element).click(function(evt) {
            alert('test after');
        });
    },

    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {
            return {
                disabled_anchor: value
            };
        });
    }
};

示例:http://jsfiddle.net/nickolsky/kp74u/40/

更新 3:正如在那里提到的(suggested edit by FIR55TORM，抱歉不能批准这个完全正确的编辑，因为我来不及审查):如果你使用的是 jQuery 1.10.x，您需要添加下划线才能访问“数据”对象，如下所示:

var events = $._data(element, "events");

为 jQuery 1.10.x 修订的 fiddle :http://jsfiddle.net/nickolsky/kp74u/41/

关于knockout.js 和禁用 anchor 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10820122/

knockoutanchorelementvalueAccessorfunctionknockout.jsjavascript

有关knockout.js 和禁用 anchor 标记的更多相关文章

  1. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案

  2. ruby-on-rails - 禁用设备的 :confirmable on-the-fly to batch-generate users - 2

    Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation

  3. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  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-on-rails - 如何在 Rails 3 中禁用 XML 解析 - 2

    我想禁用HTTP参数的自动XML解析。但我发现命令仅适用于Rails2.x，它们都不适用于3.0:config.action_controller.param_parsers.deleteMime::XML(application.rb)ActionController::Base.param_parsers.deleteMime::XMLRails3.0中的等价物是什么？ 最佳答案 根据CVE-2013-0156的最新安全公告你可以将它用于Rails3.0。3.1和3.2ActionDispatch::ParamsParser::

  7. ruby-on-rails - 将 Ruby 代码和文字标记与 Haml 混合 - 2

    如何用HAML编写这个ERB:#OR我可以:=some_ruby_code+":"#and=some_ruby_code%br但我不想在这里连接，我想将它写成内联:(=some_ruby_code):#and(=some_ruby_code)%br 最佳答案 =some_ruby_code+":"-#and=some_ruby_code+""编辑1:我不确定您在寻找什么。你想要其中之一吗？==#{some_ruby_code}:-#and==#{some_ruby_code}或==#{some_ruby_code}:-#and=so

  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. ruby - 从 gemspec/Gemfile 禁用 rdoc 和 ri - 2

    我有一个客户端gem，我将通过ruby​​gems分发业务客户端。Gem客户端有cca​​。十几个gem依赖项，当它被安装时，由于为每个gem生成rdoc和ri，安装它需要很长时间。客户是商业用户，他们对rdoc/ri没有用处，我正在寻找一种通过.gemspec或Gemfile禁用它的方法。我熟悉利用系统文件.gemrc禁用rdoc/ri的解决方案。但这是NotAcceptable解决方案，因为我希望我的安装像键入一样简单:gem安装foo 最佳答案 你可以使用post-installmessage解释他们可以通过运行@shime建

  10. ruby - 在 Ruby 中禁用 OptionParser 标志的自动完成 - 2

    #!/usr/bin/envrubyrequire'optparse'options={}OptionParser.newdo|opts|opts.on("--languageLANGUAGE",["Ruby","JavaScript"])do|language|options[:language]=languageendend.parse!puts"Language:#{options[:language]}"如果我用./bin/example--languageRu运行它，它将输出:Language:Ruby我想禁用此自动完成/最接近的匹配行为，并在未提供确切名称时引发Option

随机推荐