Question

.dotdotdot与KnockoutJS一起使用的jQuery插件存在问题。我有类似的结构：

<div class="dotdotdot">
    <h3 data-bind="text: Text"></h3>
</div>
<input data-bind="value: Text"/>
<button data-bind="click: someThingsThatTriggerDotdotdotFunction"/>

问题是当使用类dotdotdot在html元素上调用dotdotdot函数时，绑定关系会被破坏。

$('.dotdotdot').dotdotdot({});

在输入值更改后，上述代码执行值h3不再更新。

我是Knockout的新手，所以我想就我的问题寻求帮助。

Answer 1

我创建了一个自定义绑定处理程序来解决这个问题：

ko.bindingHandlers.dotDotDot = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var value = allBindingsAccessor().dotDotDot.Value;

        $(element).html(value());

        var dotdotdot = $(element).parent().truncate(options);

        allBindingsAccessor().dotDotDot.Value.subscribe(function (newValue) {
            $(element).html(newValue);
            dotdotdot.trigger("update.dot");
        });
    }
};

<div class="announcement-container">
    <div data-bind="dotDotDot: { Value: Announcement, height: 80 }"></div>
</div>

Answer 2

由于@ combatc2解决方案如今似乎无法正常工作，为此我创建了另一个自定义绑定，添加了一个显示更多/更少锚点以在截断文本和原始文本之间进行切换（<rule name="File" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{HTTP_HOST}" pattern="sitebe" /> <add input="{REQUEST_URI}" pattern="download/DownloadFile\?id=138999" /> </conditions> <action type="Redirect" url="https://site.be/download/DownloadFile?id=138111" appendQueryString="false" /> </rule>，{{1} }。

RewriteEngine on
RewriteCond %{REQUEST_URI} !/my-form
RewriteCond %{REQUEST_URI} !/save_subscribe_user
RewriteCond %{REQUEST_URI} !/demo
RewriteCond %{REQUEST_URI} !/xamarin-app-development
RewriteCond %{REQUEST_URI} !/xamarin-app-development-inner
RewriteCond %{REQUEST_URI} !/web-and-mobile-app-development
RewriteCond $1 !^(blog|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ blog/$1 [L,QSA]


## EXPIRES CACHING ##
<FilesMatch "\.(js)$">
    AddHandler application/x-httpd-php .js
</FilesMatch>

## EXPIRES CACHING ##

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    #This line added to allow blog in URL and allow routing through Laravel
    RewriteCond %{REQUEST_URI} !^/blog/    

    #Blog post preview URL
    RewriteCond %{QUERY_STRING} ^p=([0-9]*)
    RewriteRule ^ http://www.test.com/?p=%1&preview=true [R=301,L]
</IfModule>

Dotdotdot v5.0.4 (es6)

css锚点“显示更多/更少”：

Knockout v3.5.0

工作示例： https://codepen.io/raguchi/pen/VRVwqx

（请注意，该示例适用于Dotdotdot的es6版本）

jQuery dotdotdot插件禁用knocokut绑定

2 个答案: