data-bind 绑定_div data-bind-优快云博客

本文链接：https://blog.youkuaiyun.com/u010282984/article/details/76473972

本文深入探讨了数据绑定的概念，重点介绍了数据绑定中的 `data-bind` 指令。通过 `data-bind`，我们可以实现视图与模型之间的双向同步，简化前端开发工作。内容包括 `data-bind` 的基本用法、各种类型的数据绑定（如文本、事件、条件、循环等）以及如何在实际项目中有效应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="people_main_box" id="vMySkilfulTopic">
    <!--people_note-->    <div class="people_note">        <font><i class="fa fa-database"></i>金币：<span data-bind="text:MyReward">1985</span></font>        <font><i class="fa fa-thumbs-up"></i>赞同：<span data-bind="text:AgreeWithMe">9</span></font>    </div>
    <!--people_theme-->    <div class="people_theme">        <div class="people_theme_title">擅长主题</div>        <div class="item_follow_content public_clear" data-bind="foreach:TopicModelItem">            <font data-bind="text:Title">工作优化</font>                    </div>    </div>
</div>

<script type="text/javascript">    $(document).ready(function () {                function MySkilfulTopic() {            //用户ID            var UserEmployeeNo = getQueryCNString("EmployeeNo");            //擅长的主题            var UserSkilfulTopic = _spUserList[UserEmployeeNo].SkilfulTopicUser;            //获取我的赞同            var AgreeWithMe = _spUserList[UserEmployeeNo].AgreeMeCount;            //获取我的金币
            var MyReward = _spUserList[UserEmployeeNo].Reward;

//获取主题ID            var UserSpl = UserSkilfulTopic.split(";");
            var TopicArray = [];
            for (var i = 0; i < UserSpl.length; i++) {                var UserSplTrim = UserSpl[i].trim();                if (UserSplTrim != "") {                    var UserTrimJudge = _spTopicList[UserSplTrim];                    if (UserTrimJudge != null) {                        TopicArray.push(UserTrimJudge);                    }
                }
            }

var TopicModel = function () {                this.TopicModelItem = ko.observableArray(TopicArray);                this.AgreeWithMe = AgreeWithMe;                this.MyReward = MyReward;            }            ko.applyBindings(new TopicModel(), document.getElementById("vMySkilfulTopic"));

        }        MySkilfulTopic();    });
</script>