Knockoutjs 星级 css

Question

我正在尝试使用 Knockout 来实现这个 css 星级，效果很好 http://jsfiddle.net/madannes/r3s1jx4y/:

<span class="user-rating">
        <input type="radio" name="rating" value="5" /><span class="star"></span>
        <input type="radio" name="rating" value="4" /><span class="star"></span>
        <input type="radio" name="rating" value="3" /><span class="star"></span>
        <input type="radio" name="rating" value="2" /><span class="star"></span>
        <input type="radio" name="rating" value="1" /><span class="star"></span>
    </span>

我修改如下：

<div data-bind="foreach: Fields">
            <!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 -->
            <!--ko if: Type() == "Stars"-->
            <div data-bind="foreach: Options">
                <span class="user-rating">
                    <input type="radio" name="rating" data-bind="value:  $data.name,checked: $parent.Default" /><span class="star"></span>
                </span>
            </div>
            <hr />
            <!--/ko-->
            <br />
            <!--/ko-->
        </div>

数组（我使用 Ajax 从 MVC 控制器获得）：

var jsonData  = 
[ {Default: "", Name: "Do you like working here?",Title: "Test Stars",Type: "Stars",
Options:  [
 {name: '1'},{name: '2'},{name: '3'},{name: '4'},{name: '5'}]}];

视图模型：

function FormField(data) {
            var self = this;
            self.Name = ko.observable(data.Name);
            self.Type = ko.observable(data.Type);
            self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []);
            self.Default = ko.observable(data.Default);
            if (self.Type() === 'Stars') {
                this.Default.subscribe(function (newValue) {
                    alert(newValue);
                });
            }
        }
        function ViewModel(data) {
            var self = this;
            self.Fields = ko.observableArray(ko.utils.arrayMap(data, function (item) {
                return new FormField(item);
            }));
            self.HiddenElements = ko.observableArray([]);
            self.Default = ko.observable();
        }
        ko.applyBindings(new ViewModel(jsonData));

它有效，除了只选中所选的星星，例如第三颗，而在 html/css 中选中星星 1、2 和 3？我检查了每颗星的值，它们是正确的 5、4、3、2 和 1。

Answer 1

我看到您输出的 html 与 JS fiddle 示例中的不同。在您链接到的 fiddle 中的 html5 个元素的幕后发生了一些神奇的事情。使您的 html 与 fiddle 中的一样，并添加样式。我猜 <fieldset class="rating"> 的用法不是随机的

Knockoutjs 星级 css

Knockoutjs star rating css

css

rating-system

knockout-3.0