Question

如何对齐复选框列表如下：

我目前的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>

<body>
<h2>sample calendar</h2>

<div class="container-fluid"> <!-- this is to make it responsive to your screen width-->
     <div class="row" style="font-size: 12px;background-color: white; border:inset 1px black;padding-left: 21px;margin-top:8px;">
        <div data-bind="template: { name: 'month_template_every', foreach: cal_week }"></div>
    </div>
</div>

<script id="month_template_every" type="text/html">
        <div class="row">
            <input type="checkbox" name="cal_month" style="outline: 0" data-bind="attr: { id: 'check_month_' + ($index()+1), value:$data }" />
                <label class="notbold label-style" data-bind="text: $data.charAt(0).toUpperCase() + $data.slice(1) ,attr: { for: 'check_month_' + ($index()+1)}"></label>
        </div>
</script>

<script type="text/javascript">
      function MyViewModel() {

          szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"];

          this.cal_week = ko.observableArray(szWeekArray);
      }
      ko.applyBindings(new MyViewModel());
</script>

</body>
</html>

Answer 1

您应该选择Explanation的首选方法，并相应地调整视图和查看模型。

首先，您的视图模型应该按以下方式更改：

function MyViewModel() {
  var self = this;
  var szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"];
  self.cal_week = ko.observableArray(szWeekArray);
  self.cal_week_chunks = ko.computed(function() {
    // Pseudo-code, choose your chunkify method from linked question
    return self.cal_week().chunkify(17);
  });
}

然后绑定到新的cal_week_chunks computed observable来包装东西：

<div class="column" data-bind="foreach: cal_week_chunks">
  <div data-bind="template: { name: 'month_template_every', foreach: $data }"></div>
</div>

根据您的意愿设置.column的样式（例如inline-block）。

使用Twitter Bootstrap和KnockoutJS对齐

1 个答案: