Question

为了简化事情，这里有小提琴：http://jsfiddle.net/FyuSD/157/

<script id="choiceTmpl" type="text/html">
            <label><input type="radio" value="boughtBefore" data-bind="checked: radioSelectedOptionValue" />Purchase products I have bought before</label>
            <br />
            <label><input type="radio" value="searchProduct" data-bind="checked: radioSelectedOptionValue" />Search for a product I haven't purchased before</label>
            <br />

我想我有几个问题。我正在构建一个向导，需要不同的执行步骤，具体取决于用户选择的选项。我想知道的问题是，如何获得他们选择的单选按钮的值？

与第二步一样，如果他们选择“我之前购买的产品”，我该如何将其重定向到另一个问题：从指南创建订单或从之前的订单创建订单（再次使用单选按钮）？

我无法弄清楚如何获得所选内容的价值。 此外，我将如何跳过步骤，具体取决于他们选择的选项？（例如，如果他们在步骤2中选择“想要搜索产品”，则从步骤2转到步骤4）

最后，是否有一种简单的方法可以更改单选按钮文本以匹配问题，而无需为每个问题创建新模板？

很抱歉，如果这个问题太多，感谢您的帮助...

Answer 1

他们检查的单选按钮的值通过检查的绑定传递给函数（通常是可观察的，设置其值）。请参阅radio example in the documentation。
将计算机设置为状态机，然后使其值确定哪个向导页面可见。
标签文本也可以绑定到模型属性，但我在我的示例中没有这样做。

我写了一个简单的例子小提琴：http://jsfiddle.net/rqt46qw1/ 请注意，尽管我的示例仅使用无线电选择来确定要显示的页面，但您计算的可能涉及到您需要的变量。

public static int GetScreenWorkingWidth() 
{
    return java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getMaximumWindowBounds().width;
}

public void setMinPrefMax()
{
    for(int i = 0; i < myTable.getColumnCount(); i++) 
    {
        ////Min
        System.out.println("Column "+i);
        JTableHeader tableHeader = myTable.getTableHeader();
        FontMetrics headerFontMetrics = tableHeader.getFontMetrics(tableHeader.getFont());

        if(tableHeader == null) 
        {
            return;
        }

        int Test = headerFontMetrics.stringWidth(myTable.getColumnName(i));
        System.out.println("The width of the column header "+i+" is: "+Test);
        int minLength = Test+20;
        myTable.getColumnModel().getColumn(i).setMinWidth(minLength);
        ////Pref
        for(int row=0; row<myTable.getRowCount(); row++)
        {
            Font fontF1 = myTable.getFont();
            FontMetrics cVFontMetrics = myTable.getFontMetrics(fontF1);

            System.out.println(myTable.getValueAt(row, i));
            String Hello = myTable.getValueAt(row, i)+"";
            int Test2 = cVFontMetrics.stringWidth(Hello);
            System.out.println("The length of this string is: "+Test2);
            if(Test2>testMaxPrefSize)
            {
                testMaxPrefSize = Test2;
            } 
        }
        System.out.println("The maximum value for cells in column "+i+" is: "+testMaxPrefSize);
        myTable.getColumnModel().getColumn(i).setPreferredWidth(testMaxPrefSize+20);
        ////Max
        int testMaxSize = testMaxPrefSize+300;

        if(testMaxSize>GetScreenWorkingWidth())
        {
            myTable.getColumnModel().getColumn(i).setMaxWidth(GetScreenWorkingWidth());
        }

        else
        {
            myTable.getColumnModel().getColumn(i).setMaxWidth(testMaxSize);
        }

        testMaxPrefSize=0;
    }
}

使用Javascript：

<div data-bind="visible:wizPage() == '1'">
    <h1>Welcome</h1>
    <label>Page 2</label><input type="radio" value="p2" data-bind="checked:radioSelected" />
    <label>Page 3</label><input type="radio" value="p3" data-bind="checked:radioSelected" />
</div>
<div data-bind="visible:wizPage() == '2'">
    <h1>Some Option</h1>
    <label>Page 3</label><input type="radio" value="p3" data-bind="checked:radioSelected" />
    <label>Start Over</label><input type="radio" value="p1" data-bind="checked:radioSelected" />
</div>
<div data-bind="visible:wizPage() == '3'">
    <h1>Another Option</h1>
    <label>Page 2</label><input type="radio" value="p2" data-bind="checked:radioSelected" />
    <label>Start Over</label><input type="radio" value="p1" data-bind="checked:radioSelected" />
</div>

如何在Knockout.js向导中获取单选按钮选项的值？

1 个答案: